如何在颤动的谷歌地图上添加动态倍数标记？答案

【问题标题】：How to add dynamic multiples markers on flutter google map?如何在颤动的谷歌地图上添加动态倍数标记？
【发布时间】：2020-03-31 01:57:12
【问题描述】：

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

我使用geolocator 插件获取当前用户位置，并通过 initState() 方法定义它。

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

我的代码：


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
       )
    );
 }

【问题讨论】：

动态是什么意思？
我的意思是，不使用静态 latlng ，请参阅我使用静态 latlng。
那么，您想按城市名称检索 latlong 吗？
是的，就在我的位置附近。
您可以使用https://maps.googleapis.com/maps/api/place/nearbysearch/json?location=-33.8670,151.1957&radius=500&key=API_KEY这个网址拨打电话

标签： google-maps flutter dart location

【解决方案1】：

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

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

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 以获取完整示例。

【讨论】：