Question

我正在尝试迭代新的google flutter map中的标记。

我使用Web服务检索坐标数组，然后迭代元素并获取具有经度和纬度的索引。

for (int i = 0; i < list.length; i++) {
 mapController.addMarker(MarkerOptions(position:  list[0].values.elementAt(i)))));
}

还有地图选项。

GoogleMapController mapController;

GoogleMap(
     onMapCreated: (GoogleMapController mapController) {
          mapController = mapController;         
     },
     options: GoogleMapOptions(
          mapType: MapType.satellite,
          myLocationEnabled :true,
          cameraPosition: CameraPosition(
          target: LatLng(40.347022, -3.750381), zoom: 5.0),
    ),
),

我想mapController应该采用我放入for循环中的坐标，但是不起作用。控制台返回

在null上调用了方法'addMarker'。

问题是，如何使用Google Flutter Map包动态添加多个标记？

我也尝试了这个简单的代码并且可以正常工作，所以添加标记时会发生错误。

  GoogleMapController mapController;

    GoogleMap(
                  onMapCreated: (GoogleMapController mapController) {
                    mapController = mapController;
                    mapController.addMarker(MarkerOptions(
                      position:LatLng(40.347022, -3.750381),          
                      infoWindowText: InfoWindowText("Title", "Content"),
                      //icon:
                    ));
                     mapController.addMarker(MarkerOptions(
                      position:LatLng(43.321871, -3.006887),          
                      infoWindowText: InfoWindowText("Title", "Content"),
                      //icon:
                    ));

                  },
                  options: GoogleMapOptions(
                    mapType: MapType.satellite,
                    myLocationEnabled :true,
                    cameraPosition: CameraPosition(
                        target: LatLng(40.347022, -3.750381), zoom: 5.0),
                  ),
                ),

更新2

我找到了这个示例代码。这正是我想要的，但是我无法重复此代码，返回此错误

https://github.com/gerryhigh/Flutter-Google-Maps-Demo/blob/master/lib/venues.dart

NoSuchMethodError：在空调用getter'className'。

Answer 1

在第一个示例GoogleMapController中，参数与您的局部变量具有相同的名称，因此，基本上，局部变量被遮盖了，您要为其分配函数参数值。重命名这两者之一应该可以解决问题。

Answer 2

我在主构建函数中调用Google地图实例。

return GoogleMap(
  onMapCreated: _onMapCreated,
  options: GoogleMapOptions(
    cameraPosition: CameraPosition(
      target: _center1,
      zoom: 11.0,
    ),
  ),
);

在“ _onMapCreated”函数里面是迭代器：

widget.model.allItems.forEach((item) {
  //print("XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX");
  print(item.lat);

  var newItem = LatLng(double.parse(item.lat), double.parse(item.lon));
  mapController.addMarker(
    MarkerOptions(
      icon: BitmapDescriptor.fromAsset(assetName),
      position: newItem,
    ),
  );
});

这对我有用。

Answer 3

void populateOrder(Item item) async {
if (item != null) {
  for (int i = 0; i < item.feature.length; i++) {
    var position = item.feature[i];
    if (position != null) {
      try {
        if (double.parse(position.latitude) != null &&
            double.parse(position.longitude) != null) {
           mapController.clearMarkers().then((value){
             mapController.addMarker(
              MarkerOptions(
                position: LatLng(double.parse(position.latitude),
                    double.parse(position.longitude)),
                infoWindowText: InfoWindowText(position.schet, ""),
                icon: BitmapDescriptor.defaultMarker,
              ),
            );
          });
        }
      } catch (e) {
        print(e);
      }
    }
  }
}

}

void _onMapCreated(GoogleMapController controller) {
mapController = controller;
populateOrder(itemize);
Future.delayed(Duration(seconds: 6));

}

Answer 4

该库已更新：这就是我能够在地图上显示多个标记的方式。

     Completer<GoogleMapController> _controller = Completer();
         // initial camera position
         CameraPosition _cameraPos;
     // A map of markers
         Map<MarkerId, Marker> markers = <MarkerId, Marker>{};
        // function to generate random ids
        int generateIds() {
              var rng = new Random();
              var randomInt;      
                randomInt = rng.nextInt(100);
                print(rng.nextInt(100));
              return randomInt;
            }

            //call this function in initstate
            // I'm getting a json Object with locations from an 
            // external api
            buildMarkers() {
                  for (var i = 0; i < gridItem.locations.length; i++) {
                    var markerIdVal = generateIds();
                  final MarkerId markerId = MarkerId(markerIdVal.toString());
                    final Marker marker = Marker(
                  markerId: markerId,
                  position: LatLng(
                   gridItem.locations[i].latitude,
                    gridItem.locations[i].longitude,
                  ),
                  infoWindow: InfoWindow(title: gridItem.locations[i].place, snippet: gridItem.locations[i].region),
                );
// you could do setState here when adding the markers to the Map
                 markers[markerId] = marker;

                  }
                  print("Length:: + ${markers.length}");
                }
    // your Googlemaps Widget somewhere in your widget tree
    GoogleMap(
              mapType: MapType.normal,
              initialCameraPosition: _cameraPos,
              gestureRecognizers: <Factory<OneSequenceGestureRecognizer>>[Factory<OneSequenceGestureRecognizer>(()=>ScaleGestureRecognizer())].toSet(),
              markers: Set<Marker>.of(markers.values),
              onMapCreated: (GoogleMapController controller) {
                             _controller.complete(controller);}),

迭代标记Google Flutter地图

4 个答案: