在Google地图中设置标记Fflight [英] setup marker in google map flutter

问题描述

我可以用自定义经度和长度显示地图，但我想在Google地图中动态显示商店的标记，但我有点卡住了，我尝试了一些例子，但我想不出怎么做，有人能在这方面帮助我吗，我从API获取Late和Long没有问题，但我不确定如何在Google地图中设置标记。

变量已初始化

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

推荐答案

我已经通过另一个例子解决了这个问题

初始化变量

  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地图中设置标记Fflight的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！