google-maps - Flutter - Google Maps，同时有多个不同的自定义标记图像？

Question

我正在使用 Flutter 和 Google Maps API。我设法在地图打开时显示了一个自定义标记。有没有办法在同一张地图上同时拥有多个不同的自定义标记图像？

我找不到办法做到这一点。欢迎任何想法或链接:)

class Neighborhood extends StatefulWidget {
  const Neighborhood({Key key}) : super(key: key);
  @override
  _NeighborhoodState createState() => _NeighborhoodState();
}

class _NeighborhoodState extends State<Neighborhood> {
  Location _location = Location();
  GoogleMapController _controller;
  List<Marker> allMarkers = [];
  PageController _pageController;
  int prevPage;
  int bottomSelectedIndex = 0;
//initialising the custom pinIcon
  BitmapDescriptor pinIcon;

  @override
  void initState() {
    super.initState();
//calling the the function that will await the pinIcon and have it ready with initState();
    setCustomMapPin();

    _pageController = PageController(initialPage: 1, viewportFraction: 0.8)
      ..addListener(_onScroll);
  }

  void _onScroll() {...

  _myPlacesList(index) {...

然后我创建了谷歌地图

            child: GoogleMap(
              initialCameraPosition: CameraPosition(
                target: LatLng(40.505757, 22.846576),
                zoom: 12.0,
              ),
              onMapCreated: mapCreated,
              myLocationEnabled: true,
              myLocationButtonEnabled: true,
              mapToolbarEnabled: false,
              markers: Set.from(allMarkers),
            ),
          ),

  }
void setCustomMapPin() async {
    pinIcon = await BitmapDescriptor.fromAssetImage(
        ImageConfiguration(devicePixelRatio: 2.5), 'assets/images/iconMap.png');
  }

  void mapCreated(controller) {
    setState(() {
      _controller = controller;
      _location.getLocation();
//Adding markers to the screen.Calling the markers from different file.
      myPlaces.forEach((e) {
        allMarkers.add(Marker(
          markerId: MarkerId(e.name),
          draggable: false,
          icon: pinIcon,
          infoWindow: InfoWindow(
            title: e.name,
            snippet: e.address,
          ),
          position: e.locationCoords,
          onTap: () {
            _pageController.animateToPage(myPlaces.indexOf(e),
                duration: Duration(milliseconds: 300), curve: Curves.ease);
          },
        ));
      });
    });
  }
//moves the camera to pin location
  void moveCamera() {...
}

标签： google-mapsfluttergoogle-maps-markersmarker

Answer 1

你可以用这样的东西来做

_markers.add(Marker(
      consumeTapEvents: true,
      position: _center,
      infoWindow: InfoWindow(
          title: 'New Marker',
          snippet: '',
      ),
      icon: markerImage, //you custom marker, instance of BitmapDescriptor
)

而不是你实例化地图：

GoogleMap(
    onMapCreated: (GoogleMapController controller) {
        mapController = controller;
    },
    myLocationEnabled: locationEnable,
    initialCameraPosition: CameraPosition(
         target: _center,
         zoom: 10.0,
    ),
    mapType: MapType.normal,
    markers: _markers,
)

 var markerImage = await BitmapDescriptor.fromAssetImage(
          ImageConfiguration(size: Size(96, 96)),
          'assets/image/marker_image.png');