在谷歌地图颤动中设置标记

Posted 2023-02-23

【中文标题】在谷歌地图颤动中设置标记

【英文标题】：setup marker in google map flutter

【发布时间】：2021-01-31 16:52:46

【问题描述】：

我可以显示带有自定义纬度和经度的地图，但我想在谷歌地图中动态显示商店的标记，但我有点卡在下一步做什么，我尝试了一些示例，但我无法理解知道如何做到这一点，任何人都可以帮助我，我从 api 获取纬度和经度没有问题，但我不知道如何在谷歌地图中设置标记。

变量初始化

 GoogleMapController mapController;
 final LatLng _center = const LatLng(45.521563, -122.677433);
  Set<Marker> markers = Set();
  void _onMapCreated(GoogleMapController controller) 
    mapController = controller;
  

地图小部件

Widget MapViewData() 
    return Container(
      width: MediaQuery.of(context).size.width,
      height: MediaQuery.of(context).size.height,
      child: GoogleMap(
        onMapCreated: _onMapCreated,
        initialCameraPosition: CameraPosition(
          target: _center,
          zoom: 11.0,
        ),
      ),
    );
  

Api 函数返回 lat 和 long 以及详细信息

 Future<void> Mapdata() async 
    var response = await http.get(
        "$Urls.baseUrl$Urls.GetMapData?radius=100&locale=en",
        headers: 
          "Content-Type": "application/json",
          "Authorization": "Bearer $userToken",
          "Accept": "application/json"
        );
    Map<String, dynamic> value = json.decode(response.body);
  
    if (response.statusCode == 200) 
      try 
        var data = value['data'];
        var array = data['shops'];
        for (int i = 0; i < array.length; i++) 
          var obj = array[i];
          mapLists.add(NearByMapModel(
            obj['id'],
            obj['name'],
            obj['address'],
            obj['latitude'],
            obj['longitude'],
          ));
       
        
       catch (e) 
        e.toString();
      
    
  

【参考方案1】：

像这样初始化你的标记：

  List<Marker> _marker = [];

  void _initMarkers() 
    if (mapLists!= null) 

      _marker.clear();
      for (int i = 0; i < mapLists.length; i++) 
        MarkerId markerId = new MarkerId(i.toString());

        if (mapLists[i].latitude!= null && mapLists[i].longitude!= null) 
          _marker.add(
            new Marker(
              markerId: markerId,
              position: LatLng(mapLists[i].latitude, mapLists[i].longitude)
              onTap: () 
                // Handle on marker tap
              ,
              icon: BitmapDescriptor.defaultMarkerWithHue(
                      BitmapDescriptor.hueBlue),
            ),
          );
         
      
    
  

然后将它们传递给GoogleMap:

GoogleMap(
      myLocationEnabled: true,
      zoomControlsEnabled: false,
      indoorViewEnabled: true,
      mapType: MapType.terrain,
      initialCameraPosition: CameraPosition(
        target: _center,
        zoom: 11.0,
      ),
      markers: _marker.toSet(),
      myLocationButtonEnabled: true,
      onMapCreated: (GoogleMapController controller) 
        mapController = controller;
      ,
    )

【讨论】：

当我使用这个 _initMarkers() 函数时，它显示多个错误Undefined name '_objs'.,The method '_onMarkerTap' isn't defined for the type '_DashboardNearByScreenState'.,The method '_onMarkerTap' isn't defined for the type '_DashboardNearByScreenState'[e-mail]

我更新了我的答案并使用了你的模型。如果您需要注意用户选择标记，请实施onTap。 @刺客

还有问题he operator '[]' isn't defined for the type 'Set<Marker>'.和Undefined name '_googlePlex'[e-mail]

其他错误消失了，现在它引发了另一个错误`断言失败：第 26 行 pos 16: 'target != null': is not true.`@R.Shpd

正如错误所说，您不能将 null 传递给 target 参数。 @刺客

【参考方案2】：

我已经通过另一个例子弄清楚了

初始化变量

  double latti=25.2048493,long=55.2707828;
  Completer<GoogleMapController> _controller = Completer();
  Iterable markers = [];

地图小部件

  Widget MapViewData() 
    return Container(
      width: MediaQuery.of(context).size.width,
      height: MediaQuery.of(context).size.height,
      child: GoogleMap(
        markers: Set.from(markers),
        initialCameraPosition:
            CameraPosition(
                target: LatLng(latti, long),
                tilt: 30,
                zoom:  14),
        mapType: MapType.normal,
        onMapCreated: (GoogleMapController controller) 
          _controller = controller as Completer<GoogleMapController>;
        ,
      ),
    );
   

API 调用

  Future<void> Mapdata() async 
    var response = await http.get(
        "$Urls.baseUrl$Urls.GetMapData?radius=100&locale=en",
        headers: 
          "Content-Type": "application/json",
          "Authorization": "Bearer $userToken",
          "Accept": "application/json"
        );
    Map<String, dynamic> value = json.decode(response.body);
 
    if (response.statusCode == 200) 
      try 
        var data = value['data'];
        var array = data['shops'];
        for (int i = 0; i < array.length; i++) 
          var obj = array[i];
        
          mapLists.add(NearByMapModel(
            obj['id'],
            obj['name'],
            obj['address'],
            obj['latitude'],
            obj['longitude'],
          ));

          Iterable _markers = Iterable.generate(mapLists.length, (index) 
            Map result = array[index];
            latti = double.parse(obj["latitude"]);
            long = double.parse(obj["longitude"]);
            LatLng latLngMarker = LatLng(double.parse(result["latitude"]),
                double.parse(result["longitude"]));

            return Marker(
                markerId: MarkerId("marker$index"),
                position: latLngMarker,
                infoWindow: InfoWindow(
                    title: result["name"], snippet: result["address"]));
          );
          setState(() 
            mapLists.length;
            markers = _markers;
            this.latti = latti;
            this.long = long;
          );
        
       catch (e) 
        e.toString();