我在我的Flutter应用中使用google_maps_flutter来使用Google地图，我有自定义标记图标，并使用BitmapDescriptor.fromAsset("images/car.png")加载它。但是，我的地图上的图标尺寸太大了，我想让它变小，但是我找不到任何选项来实现。是否有更改自定义标记图标的选项。
这是我的Flutter代码：
mapController.addMarker(
MarkerOptions(
icon: BitmapDescriptor.fromAsset("images/car.png"),
position: LatLng(
deviceLocations[i]['latitude'],
deviceLocations[i]['longitude'],
),
),
);
这是我的Android模拟器截屏：
从图片中可以看到，我的自定义图标大小太大了。
简而言之: 只要能够将任何图像编码为原始字节（如Uint8List），您就可以将其用作标记。
目前，您可以使用Uint8List数据来创建带有Google Maps的标记。这意味着只要保持正确的编码格式（在这种特定情况下是png），您就可以使用原始数据绘制任何您想要的地图标记。
我将通过两个示例进行说明，您可以选择：
除此之外，您甚至可以将渲染小部件转换为静态图像，因此也可以将其用作标记。
首先，创建一个处理资源路径并接收大小的方法（这可以是宽度、高度或两者都可以，但只使用一个将保持比例）。
import 'dart:ui' as ui;
Future<Uint8List> getBytesFromAsset(String path, int width) async {
ByteData data = await rootBundle.load(path);
ui.Codec codec = await ui.instantiateImageCodec(data.buffer.asUint8List(), targetWidth: width);
ui.FrameInfo fi = await codec.getNextFrame();
return (await fi.image.toByteData(format: ui.ImageByteFormat.png)).buffer.asUint8List();
}
然后，只需使用正确的描述符将其添加到您的地图中：
final Uint8List markerIcon = await getBytesFromAsset('assets/images/flutter.png', 100);
final Marker marker = Marker(icon: BitmapDescriptor.fromBytes(markerIcon));
这将分别生成50、100和200宽度的以下内容。
您可以使用画布绘制任何想要的内容，然后将其用作标记。以下代码将生成一个简单的圆角框，并在其中显示“Hello world！”文本。
因此，首先使用画布绘制一些内容：
Future<Uint8List> getBytesFromCanvas(int width, int height) async {
final ui.PictureRecorder pictureRecorder = ui.PictureRecorder();
final Canvas canvas = Canvas(pictureRecorder);
final Paint paint = Paint()..color = Colors.blue;
final Radius radius = Radius.circular(20.0);
canvas.drawRRect(
RRect.fromRectAndCorners(
Rect.fromLTWH(0.0, 0.0, width.toDouble(), height.toDouble()),
topLeft: radius,
topRight: radius,
bottomLeft: radius,
bottomRight: radius,
),
paint);
TextPainter painter = TextPainter(textDirection: TextDirection.ltr);
painter.text = TextSpan(
text: 'Hello world',
style: TextStyle(fontSize: 25.0, color: Colors.white),
);
painter.layout();
painter.paint(canvas, Offset((width * 0.5) - painter.width * 0.5, (height * 0.5) - painter.height * 0.5));
final img = await pictureRecorder.endRecording().toImage(width, height);
final data = await img.toByteData(format: ui.ImageByteFormat.png);
return data.buffer.asUint8List();
}
然后以相同的方式使用它，但这次提供任何您想要的数据（例如宽度和高度），而不是资产路径。
final Uint8List markerIcon = await getBytesFromCanvas(200, 100);
final Marker marker = Marker(icon: BitmapDescriptor.fromBytes(markerIcon));
这就是你要的。
我已更新上面的函数，现在您可以按照自己的意愿缩放图像。
Future<Uint8List> getBytesFromCanvas(int width, int height, urlAsset) async {
final ui.PictureRecorder pictureRecorder = ui.PictureRecorder();
final Canvas canvas = Canvas(pictureRecorder);
final ByteData datai = await rootBundle.load(urlAsset);
var imaged = await loadImage(new Uint8List.view(datai.buffer));
canvas.drawImageRect(
imaged,
Rect.fromLTRB(
0.0, 0.0, imaged.width.toDouble(), imaged.height.toDouble()),
Rect.fromLTRB(0.0, 0.0, width.toDouble(), height.toDouble()),
new Paint(),
);
final img = await pictureRecorder.endRecording().toImage(width, height);
final data = await img.toByteData(format: ui.ImageByteFormat.png);
return data.buffer.asUint8List();
}
以下是2020年5月添加自定义Google地图标记的示例。
我的示例应用：
引入：
import 'dart:typed_data';
import 'dart:ui' as ui;
import 'package:flutter/services.dart';
import 'package:flutter/material.dart';
在您的主要有状态类中的某个位置实例化标记地图：
Map<MarkerId, Marker> markers = <MarkerId, Marker>{};
将图标资产转换为Uint8List对象的功能（一点也不复杂 /s）：
Future<Uint8List> getBytesFromAsset(String path, int width) async {
ByteData data = await rootBundle.load(path);
ui.Codec codec =
await ui.instantiateImageCodec(data.buffer.asUint8List(), targetWidth: width);
ui.FrameInfo fi = await codec.getNextFrame();
return (await fi.image.toByteData(format: ui.ImageByteFormat.png)).buffer.asUint8List();
}
添加标记函数（使用您希望标记的纬度和经度坐标来调用此函数）
Future<void> _addMarker(tmp_lat, tmp_lng) async {
var markerIdVal = _locationIndex.toString();
final MarkerId markerId = MarkerId(markerIdVal);
final Uint8List markerIcon = await getBytesFromAsset('assets/img/pin2.png', 100);
// creating a new MARKER
final Marker marker = Marker(
icon: BitmapDescriptor.fromBytes(markerIcon),
markerId: markerId,
position: LatLng(tmp_lat, tmp_lng),
infoWindow: InfoWindow(title: markerIdVal, snippet: 'boop'),
);
setState(() {
// adding a new marker to map
markers[markerId] = marker;
});
}
pubspec.yaml文件（可以随意尝试不同的图标）
flutter:
uses-material-design: true
assets:
- assets/img/pin1.png
- assets/img/pin2.png
我有同样的问题，我是这样解决的。
Future < Uint8List > getBytesFromCanvas(int width, int height, urlAsset) async
{
final ui.PictureRecorder pictureRecorder = ui.PictureRecorder();
final Canvas canvas = Canvas(pictureRecorder);
final Paint paint = Paint()..color = Colors.transparent;
final Radius radius = Radius.circular(20.0);
canvas.drawRRect(
RRect.fromRectAndCorners(
Rect.fromLTWH(0.0, 0.0, width.toDouble(), height.toDouble()),
topLeft: radius,
topRight: radius,
bottomLeft: radius,
bottomRight: radius,
),
paint);
final ByteData datai = await rootBundle.load(urlAsset);
var imaged = await loadImage(new Uint8List.view(datai.buffer));
canvas.drawImage(imaged, new Offset(0, 0), new Paint());
final img = await pictureRecorder.endRecording().toImage(width, height);
final data = await img.toByteData(format: ui.ImageByteFormat.png);
return data.buffer.asUint8List();
}
Future < ui.Image > loadImage(List < int > img) async {
final Completer < ui.Image > completer = new Completer();
ui.decodeImageFromList(img, (ui.Image img) {
return completer.complete(img);
});
return completer.future;
}
你可以像这样使用。
final Uint8List markerIcond = await getBytesFromCanvas(80, 98, urlAsset);
setState(() {
markersMap[markerId] = Marker(
markerId: MarkerId("marker_${id}"),
position: LatLng(double.parse(place.lat), double.parse(place.lng)),
icon: BitmapDescriptor.fromBytes(markerIcond),
onTap: () {
_onMarkerTapped(placeRemote);
},
);
});
targetWidth设置为一个特定数字时，你可能会在具有不同devicePixelRatio的不同手机上出现问题。这是我实施它的方法。import 'dart:ui' as ui;
import 'dart:typed_data';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
Future<Uint8List> getBytesFromAsset(String path) async {
double pixelRatio = MediaQuery.of(context).devicePixelRatio;
ByteData data = await rootBundle.load(path);
ui.Codec codec = await ui.instantiateImageCodec(
data.buffer.asUint8List(),
targetWidth: pixelRatio.round() * 30
);
ui.FrameInfo fi = await codec.getNextFrame();
return (await fi.image.toByteData(format: ui.ImageByteFormat.png)).buffer.asUint8List();
}
然后像这样使用该方法
final Uint8List markerIcon = await getBytesFromAsset('assets/images/bike.png');
Marker(icon: BitmapDescriptor.fromBytes(markerIcon),)
这使得我的大小具有根据devicePixelRatio变化的动态性。
这对我来说完美地解决了问题。
运行时应根据屏幕密度选择正确的图像。请参见 https://flutter.dev/docs/development/ui/assets-and-images#declaring-resolution-aware-image-assets。
目前在 Android 或 Fuschia 上还未自动完成此操作。如果您现在要发布并想解决此问题，可以使用以下逻辑检查平台：
" MediaQueryData data = MediaQuery.of(context);
double ratio = data.devicePixelRatio;
bool isIOS = Theme.of(context).platform == TargetPlatform.iOS;
String imageDir(String prefix, String fileName, double pixelRatio, bool isIOS) {
String directory = '/';
if (!isIOS) {
if (pixelRatio >= 1.5) {
directory = '/2.0x/';
}
else if (pixelRatio >= 2.5) {
directory = '/3.0x/';
}
else if (pixelRatio >= 3.5) {
directory = '/4.0x/';
}
}
return '$prefix$directory$fileName';
}
myLocationMarker = Marker(
markerId: MarkerId('myLocation'),
position: showingLocation, flat: true,
icon: BitmapDescriptor.fromAsset(imageDir('assets/map_icons','person_icon.png', ratio, isIos)));
fromAsset() 已被弃用，应该使用 fromAssetImage() 替代，就像其他答案中提到的一样。更优雅的应用 fromAssetImage() 来适应不同分辨率设备的方法是声明分辨率感知型图像资源。Flutter 使用逻辑像素来渲染屏幕，如果我没记错的话，每英寸大约为 72 像素，而现代移动设备可能包含超过 200 像素每英寸。使图像在具有不同像素密度的不同移动设备上看起来相似的解决方案是准备多个不同大小的相同图像副本，在像素密度较低的设备上使用较小的图像，在像素密度较高的设备上使用较大的图像。
因此，您应该准备以下示例图像：
images/car.png <-- if this base image is 100x100px
images/2.0x/car.png <-- 2.0x one should be 200x200px
images/3.0x/car.png <-- and 3.0x one should be 300x300px
createLocalImageConfiguration()将根据设备像素比应用正确的缩放。mapController.addMarker(
MarkerOptions(
icon: BitmapDescriptor.fromAssetImage(
createLocalImageConfiguration(context),
"images/car.png"),
position: LatLng(
deviceLocations[i]['latitude'],
deviceLocations[i]['longitude'],
),
),
);
fromAssetImage()实现。你可以看到BitmapDescriptor的底层实现需要一个scale参数，这是获取正确图片大小的关键。 static Future<BitmapDescriptor> fromAssetImage(
ImageConfiguration configuration,
String assetName, {
AssetBundle bundle,
String package,
bool mipmaps = true,
}) async {
if (!mipmaps && configuration.devicePixelRatio != null) {
return BitmapDescriptor._(<dynamic>[
'fromAssetImage',
assetName,
configuration.devicePixelRatio,
]);
}
final AssetImage assetImage =
AssetImage(assetName, package: package, bundle: bundle);
final AssetBundleImageKey assetBundleImageKey =
await assetImage.obtainKey(configuration);
return BitmapDescriptor._(<dynamic>[
'fromAssetImage',
assetBundleImageKey.name,
assetBundleImageKey.scale,
if (kIsWeb && configuration?.size != null)
[
configuration.size.width,
configuration.size.height,
],
]);
}
size属性仅适用于Web。createLocalImageConfiguration(context) 这个是从哪里来的？它为什么不工作呢？:'( - Sunshineimport package:flutter/widgets.dart。 - Lance Chen以下是我在选择不同密度图像时的有效方法:
MediaQueryData mediaQueryData = MediaQuery.of(context);
ImageConfiguration imageConfig = ImageConfiguration(devicePixelRatio: mediaQueryData.devicePixelRatio);
BitmapDescriptor.fromAssetImage(imageConfig, "assets/images/marker.png");
我将添加一个解决方案，混合来自任何地方的多个想法和代码来解决此问题，首先是一个管理图像大小的函数：
Future<Uint8List> getBytesFromCanvas(double escala, urlAsset) async {
final ui.PictureRecorder pictureRecorder = ui.PictureRecorder();
final Canvas canvas = Canvas(pictureRecorder);
final ByteData datai = await rootBundle.load(urlAsset);
var imaged = await loadImage(new Uint8List.view(datai.buffer));
double width = ((imaged.width.toDouble() * escala).toInt()).toDouble();
double height = ((imaged.height.toDouble() * escala).toInt()).toDouble();
canvas.drawImageRect(imaged, Rect.fromLTRB(0.0, 0.0, imaged.width.toDouble(), imaged.height.toDouble()),
Rect.fromLTRB(0.0, 0.0, width, height),
new Paint(),
);
final img = await pictureRecorder.endRecording().toImage(width.toInt(), height.toInt());
final data = await img.toByteData(format: ui.ImageByteFormat.png);
return data.buffer.asUint8List();
}
Future < ui.Image > loadImage(List < int > img) async {
final Completer < ui.Image > completer = new Completer();
ui.decodeImageFromList(img, (ui.Image img) {
return completer.complete(img);
});
return completer.future;
}
然后根据设备 IOS 或 Android 应用此函数。getBytesFromCanvas() 函数需要两个参数，图像实际大小的比例和资源 URL。
var iconTour;
bool isIOS = Theme.of(context).platform == TargetPlatform.iOS;
if (isIOS){
final markerIcon = await getBytesFromCanvas(0.7, 'images/Icon.png');
iconTour = BitmapDescriptor.fromBytes(markerIcon);
}
else{
final markerIcon = await getBytesFromCanvas(1, 'images/Icon.png');
iconTour = BitmapDescriptor.fromBytes(markerIcon);
}
setState(() {
final Marker marker = Marker(icon: iconTour);
});
这就是全部。
google_maps_flutter: ^0.5.19
Future setMarkersPoint() async {
var icon = 'your url';
Uint8List dataBytes;
var request = await http.get(icon);
var bytes = await request.bodyBytes;
setState(() {
dataBytes = bytes;
});
final Uint8List markerIcoenter code heren =
await getBytesFromCanvas(150, 150, dataBytes);
var myLatLong = LatLng(double.parse(-6.9024812),
double.parse(107.61881));
_markers.add(Marker(
markerId: MarkerId(myLatLong.toString()),
icon: BitmapDescriptor.fromBytes(markerIcon),
position: myLatLong,
infoWindow: InfoWindow(
title: 'Name of location',
snippet: 'Marker Description',
),
));
}
如果您想更改图标大小，请使用以下代码。
Future<Uint8List> getBytesFromCanvas(
int width, int height, Uint8List dataBytes) async {
final ui.PictureRecorder pictureRecorder = ui.PictureRecorder();
final Canvas canvas = Canvas(pictureRecorder);
final Paint paint = Paint()..color = Colors.transparent;
final Radius radius = Radius.circular(20.0);
canvas.drawRRect(
RRect.fromRectAndCorners(
Rect.fromLTWH(0.0, 0.0, width.toDouble(), height.toDouble()),
topLeft: radius,
topRight: radius,
bottomLeft: radius,
bottomRight: radius,
),
paint);
var imaged = await loadImage(dataBytes.buffer.asUint8List());
canvas.drawImageRect(
imaged,
Rect.fromLTRB(
0.0, 0.0, imaged.width.toDouble(), imaged.height.toDouble()),
Rect.fromLTRB(0.0, 0.0, width.toDouble(), height.toDouble()),
new Paint(),
);
final img = await pictureRecorder.endRecording().toImage(width, height);
final data = await img.toByteData(format: ui.ImageByteFormat.png);
return data.buffer.asUint8List();
}
Future<ui.Image> loadImage(List<int> img) async {
final Completer<ui.Image> completer = new Completer();
ui.decodeImageFromList(img, (ui.Image img) {
return completer.complete(img);
});
return completer.future;
}
