google-maps - 如何在 flutter google map 上添加动态多个标记？

Question

我从昨天开始浏览它，但找不到任何令人满意的解决方案。

我用了geolocator获取当前用户位置的插件，并从 initState() 方法定义它。

我在 map 上设置了静态标记，但想在 map 上获取动态标记。

我的代码:

Completer<GoogleMapController> _controller = Completer();
 Position position;
 Set<Marker> markers = Set();
List<Marker> addMarkers = [
    Marker(
      markerId: MarkerId("Quark city Id"),
      infoWindow: InfoWindow(
        title: "Quark city",
      ),
      icon: BitmapDescriptor.defaultMarkerWithHue(BitmapDescriptor.hueRed),
      position:  LatLng(30.706129, 76.692422)
    ),
    Marker(
      markerId: MarkerId("Godrej Company Id"),
      infoWindow: InfoWindow(
        title: "Godrej Company",
      ),
      icon: BitmapDescriptor.defaultMarkerWithHue(BitmapDescriptor.hueGreen),
      position:  LatLng(30.701916, 76.695063)
    ),
    Marker(
      markerId: MarkerId("Radha Swami Chouwk Id"),
      infoWindow: InfoWindow(
        title: "Radha Swami Chouwk",
      ),
      icon: BitmapDescriptor.defaultMarkerWithHue(BitmapDescriptor.hueBlue),
      position:  LatLng(30.703092, 76.701069)
    ),
  ];




@override
  void initState() {
    markers.addAll(addMarkers); // add markers to the list
    super.initState();
    getCurrentLocation();

  }
//Current user's marker:
 void getCurrentLocation()async{
    Position pos= await Geolocator().getCurrentPosition();
    setState(() {
      position = pos;

      // added markers on user current location
      markers.add(Marker( 
        markerId: MarkerId("current Id"),
        infoWindow: InfoWindow(
          title: "Current",
        ),
        position: LatLng(position.latitude,position.longitude),
        icon: BitmapDescriptor.defaultMarkerWithHue(BitmapDescriptor.hueOrange),
     ));
    });
  }

构建方法:

Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Google Map"), centerTitle: true,),
      body:position == null
      ? Center(child: CircularProgressIndicator(),)
      :GoogleMap(
        ......
        ......
        markers: markers
       )
    );
 } 

Answer 1

使用 google_maps_flutter - Flutter 的官方 Google map 插件。您可以使用 GoogleMap 的 markers属性来创建多个 map 标记。

通过生成标记对象来创建标记。

final Marker marker = Marker(
  markerId: markerId,
  position: LatLng(
    center.latitude + sin(_markerIdCounter * pi / 6.0) / 20.0,
    center.longitude + cos(_markerIdCounter * pi / 6.0) / 20.0,
  ),
  infoWindow: InfoWindow(title: markerIdVal, snippet: '*'),
  onTap: () => _onMarkerTapped(markerId),
  onDragEnd: (LatLng position) => _onMarkerDragEnd(markerId, position),
  onDrag: (LatLng position) => _onMarkerDrag(markerId, position),
);

然后在 GoogleMap 小部件上设置标记。

GoogleMap(
  onMapCreated: _onMapCreated,
  initialCameraPosition: const CameraPosition(
    target: LatLng(-33.852, 151.211),
    zoom: 11.0,
  ),
  markers: Set<Marker>.of(markers.values),
),

您可以查看 plugin's demo对于完整的样本。