Question

我制作了一个简单的应用程序，可以从API获取标记并将其绘制在Google Map上。

我从API中获得了标记信息，并将其添加到列表<标记> 。

但是当我运行我的应用程序时，地图上没有显示标记。

-我的函数从API获取标记：

Future<Set<Marker>> _creatMarkers() async {
    List<Marker> mMarkers = [];

    var url = "http://10.0.2.2/Track_App/locations.php";
    final response = await http.get(url);
    final responsebody = jsonDecode(response.body);
    if (responsebody.length > 0) {
      for (int i = 0; i < responsebody.length; i++) {
        if (responsebody[i] != null) {
          Map<String, dynamic> map = responsebody[i];
          var x = double.parse(map['loc_x']);
          var y = double.parse(map['loc_y']);
          mMarkers.add(
            Marker(
              markerId: MarkerId(map['loc_id']),
              position: LatLng(x, y),
            ),
          );
        }
      }
    }
    return mMarkers.toSet();
  }

Google地图代码：

FutureBuilder(
 future: _creatMarkers(),
  builder: (BuildContext context, AsyncSnapshot snapshot) {
   return GoogleMap(
     mapType: MapType.normal,
     initialCameraPosition: _kGooglePlex,
     markers: snapshot.data,
   );
  },
 ),

来自API的JSON数据

[
 {
  loc_id: "1 ",
  loc_x: "15.392567",
  loc_y: "44.278188"
 },
 {
  loc_id: "2 ",
  loc_x: "15.391717",
  loc_y: "44.278019"
 }
]

Answer 1

首先，您必须初始化标记（可以使用API进行初始化），然后将标记放在特定的位置。我在一个实时跟踪应用程序中使用的这段代码

  Set<Marker> _markers = {}; // to store all markers
void _onMapCreated(GoogleMapController controller) async {
    await getPermission();
    setState(() {
      _googleMapController = controller;
    
      setSourceAndDestinationIcons().then((_) => setMapPins());
    });
  }

。

setSourceAndDestinationIcons() async {
    sourceIcon = await BitmapDescriptor.fromAssetImage(
        ImageConfiguration(devicePixelRatio: 2.5),
        'lib/asset/images/sourceIcon.png');
    destinationIcon = await BitmapDescriptor.fromAssetImage(
        ImageConfiguration(devicePixelRatio: 2.5),
        'lib/asset/images/dropOffPin.png');
  }

。

    void setMapPins() {
        setState(() {
          // source pin
          double _customerLat = double.parse(customerLat);
          double _customerLong = double.parse(customerLong);
          _markers.clear();
          double currentLat = _locationData.latitude;
          double currentLong = _locationData.longitude;
          _markers.add(Marker(
              markerId: MarkerId('sourcePin'),
              position: LatLng(currentLat, currentLong), // sources
              icon: sourceIcon));
    
      

_markers.add(Marker(
          markerId: MarkerId('destPin'),
          position: LatLng(_customerLat, _customerLong), // destination
          icon: destinationIcon));
      for (int i = 0; i < listOfStores.length; i++) {
        _markers.add(Marker(
          markerId: MarkerId(listOfStores[i].dukaanId.toString()), //way points
          position: LatLng(listOfStores[i].latitude, listOfStores[i].longitude),
          icon: sourceIcon,
        ));
      }
    });
  }

颤振如何从API获取Google地图标记并在Google Map上绘制

1 个答案: