Question

有没有办法在地图上显示带有官方Flutter Google Maps plugin的自定义标记？根据文档找不到任何方法。

Answer 1

我正在使用：

controller.addMarker(MarkerOptions(
  icon: BitmapDescriptor.fromAsset("images/restaurant.png"),
  position: LatLng(40.017870, -105.278350),
));

它在Android上运行良好，但在iOS上不运行。

Answer 2

BitmapDescriptor.fromAsset是deprecated

改为使用BitmapDescriptor.fromImageAsset。

在选择适当的资产时，它会尊重设备DPI。参见Declaring resolution-aware image assets。

Answer 3

根据新插件BitmapDescriptor.fromAsset（“ images / restaurant.png”）不能正常工作，因此请参考此link并找到我的解决方案。

Future<BitmapDescriptor> _getAssetIcon(BuildContext context) async {
final Completer<BitmapDescriptor> bitmapIcon =
    Completer<BitmapDescriptor>();
final ImageConfiguration config = createLocalImageConfiguration(context);

const AssetImage('assets/red_square.png')
    .resolve(config)
    .addListener((ImageInfo image, bool sync) async {
  final ByteData bytes =
      await image.image.toByteData(format: ImageByteFormat.png);
  final BitmapDescriptor bitmap =
      BitmapDescriptor.fromBytes(bytes.buffer.asUint8List());
  bitmapIcon.complete(bitmap);
});

return await bitmapIcon.future;}

并像这样使用它

void _add(LatLng position,String address) async{
final MarkerId markerId = MarkerId('1');
BitmapDescriptor markericon = await _getAssetIcon(context);

// creating a new MARKER
final Marker marker = Marker(
  markerId: markerId,
  position: position,
  infoWindow: InfoWindow(title: address, snippet: 'go here'),
  icon: markericon
);

setState(() {
  _markers[markerId] = marker;
});}

希望它对您有用。

Answer 4

**尝试一下，

_createMarkerImageFromAsset("assets/locationMarker.png");

 Future <BitmapDescriptor> _createMarkerImageFromAsset(String iconPath) async {
    ImageConfiguration configuration = ImageConfiguration();
     bitmapImage = await BitmapDescriptor.fromAssetImage(
        configuration,iconPath);
    return bitmapImage;
  }

将bitmapImage设置为标记

 Marker(
        markerId: MarkerId('value'),
        icon: bitmapImage,
        position: LatLng(),
       );

Answer 5

BitmapDescriptor customIcon;

// make sure to initialize before map loading
BitmapDescriptor.fromAssetImage(ImageConfiguration(size: Size(12, 12)),
        'assets/images/car-icon.png')
    .then((d) {
  customIcon = d;
});

final nearbyCarsLocation = [
  LatLng(24.9286825, 67.0403249),
  LatLng(24.985577, 67.0661056), //24.9294892,67.0391903,18.73z
];

void _getNearByCars() {

  for (var i = 0; i < nearbyCarsLocation.length; i++) {
    var now = new DateTime.now().millisecondsSinceEpoch;
    _markers.add(Marker(
      markerId: MarkerId(nearbyCarsLocation[i].toString() + now.toString()),
      position: nearbyCarsLocation[i],
      // infoWindow: InfoWindow(title: address, snippet: "go here"),
      icon: customIcon ));
  }
  notifyListeners();
}

希望这将有助于获取附近的自定义地点

Answer 6

算法asi https://www.youtube.com/watch?v=ajuo0HjN3lY&t=905s

BitmapDescriptor icon;


@override
  void initState() {
    getIcons();
    super.initState();
  }


// Cargar imagen del Marker
  getIcons() async {
    var icon = await BitmapDescriptor.fromAssetImage(
        ImageConfiguration(devicePixelRatio: 3.2),
        "assets/images/markeruser.png");
    setState(() {
      this.icon = icon;
    });
  }


// Crear Marker
  createMarkers() {
    markers.add(
      Marker(
        markerId: MarkerId("MarkerCurrent"),
        position: currentLocation,
        icon: icon,
        infoWindow: InfoWindow(
            title: "Mi Ubicacion",
            snippet:
                "Lat ${currentLocation.latitude} - Lng ${currentLocation.longitude}"),
        draggable: true,
        onDragEnd: onDragEnd,
      ),
    );
  }

Answer 7

更改标记图标

    details  = acctBal
                     .stream()
                     .filter{ f -> f.getBalType() != null }
                     .map { it -> mapToProductDetail (it) }
                     .collect()

Answer 8

实际上，只有example repository of google_maps的注释代码有效...因为flutter sdk的API有所变化（目前在1.78 + hotfix4中是即时通讯）

因此，这是函数，与api相同，只是对API进行了一些更改，您只需要更改图像路线的“ assets / red_square.png”行即可。

   Future<BitmapDescriptor> _getAssetIcon(BuildContext context) async {
   final Completer<BitmapDescriptor> bitmapIcon =
       Completer<BitmapDescriptor>();
   final ImageConfiguration config = createLocalImageConfiguration(context);

   const AssetImage('assets/red_square.png')
       .resolve(config)
       .addListener(ImageStreamListener((ImageInfo image, bool sync) async {
     final ByteData bytes =
         await image.image.toByteData(format: ImageByteFormat.png);
     final BitmapDescriptor bitmap =
         BitmapDescriptor.fromBytes(bytes.buffer.asUint8List());
     bitmapIcon.complete(bitmap);
   }));

   return await bitmapIcon.future;
 }

如果您创建BitMapDescriptor变量，则只需在添加标记之前第一次调用此函数，但不要忘记“等待”。

还建议在名称（2.0x和3.0x）的文件夹中再放置2张较大尺寸的图像，您可以在example images中查看分辨率

不要忘记在pubspec.yaml中取消注释“ / assets”

Answer 9

final bitmapIcon = await BitmapDescriptor.fromAssetImage(ImageConfiguration(size: Size(48,48)), 'assets/images/marker.png');

Marker(
        markerId: MarkerId('marker_2'),
        position: LatLng(_position.target.latitude, _position.target.longitude),
        draggable: true,
        icon: bitmapIcon,
      )

尝试上面的代码，使用异步编程。

Answer 10

将flutter_map插入MapBox

我尝试使用Google Maps进行此操作，成功地在地图上呈现了动态Web资产，并且性能非常低。有了MapBox，它非常棒，您可以立即将小部件用作标记。

Flutter Google Maps插件的自定义标记

10 个答案: