如何在 Flutter 中在标记顶部制作自定义动态 Google 地图标记（包括网络图像）

Question

所需输出

所需的输出就像图像一样。

Answer 1

您可以借助此代码创建这些类型的标记。

  Set<Marker> markers = Set(); 

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

addMarkers() async {
   
String imgurl = "https://www.fluttercampus.com/img/car.png";
Uint8List bytes = (await NetworkAssetBundle(Uri.parse(imgurl))
  .load(imgurl))
  .buffer
  .asUint8List();

 markers.add(
 Marker( //add start location marker
markerId: MarkerId(carLocation.toString()),
position: carLocation, //position of marker
infoWindow: InfoWindow( //popup info 
  title: 'Car Point ',
  snippet: 'Car Marker',
),
icon: BitmapDescriptor.fromBytes(bytes), //Icon for Marker
)
);

setState(() {
    //refresh UI
});
}

现在在地图中添加此标记

GoogleMap( //Map widget from google_maps_flutter package
              zoomGesturesEnabled: true, //enable Zoom in, out on map
              initialCameraPosition: CameraPosition( //innital position in map
                target: startLocation, //initial position
                zoom: 14.0, //initial zoom level
              ),
              markers: markers, //markers to show on map
              mapType: MapType.normal, //map type
              onMapCreated: (controller) { //method called when map is created
                setState(() {
                  mapController = controller; 
                });
              },
      )

Answer 2

这里是在地图中将网络图像显示为谷歌标记的示例，您也可以自定义它。 在初始化状态下或加载 GoogleMap 之前初始化 Uint8List

Uint8List bytes = (await NetworkAssetBundle(Uri.parse(imageUrl))
     .load(imageUrl))
     .buffer
     .asUint8List();
CameraPosition iniCameraPosition= CameraPosition(target: currentPosition, zoom: 17.0);
GoogleMap(
initialCameraPosition: iniCameraPosition,
markers: {
    Marker(
       icon: BitmapDescriptor.bytes(bytes,// add your bytes image here
         width: 
         40,height: 40,),
         draggable: false,
         markerId: const MarkerId('Sydney'),
         position: currentPosition,
                           )
                       },
                     )