Question

我可以显示带有自定义纬度和经度的地图，但是我想在Google地图中动态显示商店标记，但是我有点想下一步做什么，我尝试了一些示例，但我不知道怎么做，任何人都可以帮我这个忙，我从api获取经纬度没有问题，但是我不确定如何在Google Map中设置标记。

变量已初始化

 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函数可同时恢复经度和纬度以及细节

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

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

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

Google Map Flutter中的设置标记

2 个答案: