Flutter谷歌地图如何添加自定义图片标记？

Got it, let's get your custom marker working! The default red marker is easy to swap out—you just need to use the icon parameter in the Marker class with a BitmapDescriptor generated from your image. Here's how to do it step by step:

Step 1: Prepare Your Custom Image & Update pubspec.yaml #

First, add your custom marker image to your project (I usually put mine in assets/images/). Then, update your pubspec.yaml to declare the asset so Flutter can find it:

flutter:
  assets:
    - assets/images/your_custom_marker.png # Replace with your actual image path

Don't forget to run flutter pub get after saving this change!

Step 2: Modify Your Marker Code to Use the Custom Image #

The key is to load your image into a BitmapDescriptor (since markers require this format) and pass it to the icon property of your Marker. Since loading the image is asynchronous, we'll adjust your _onMapCreated method to handle this:

Here's the full updated code for your _MapScreenState:

class _MapScreenState extends State<MapScreen> {
  Completer<GoogleMapController> _controller = Completer();

  @override
  void initState() {
    super.initState();
    _onMapCreated(); // Call the async method here
  }

  final currentPostion = LatLng(24.916404, 67.130654);
  final Map<String, Marker> _markers = {};

  Future<void> _onMapCreated() async {
    // Load your custom marker image into a BitmapDescriptor
    final BitmapDescriptor customMarker = await BitmapDescriptor.fromAssetImage(
      ImageConfiguration(size: Size(48, 48)), // Adjust size to fit your needs
      'assets/images/your_custom_marker.png', // Replace with your actual image path
    );

    setState(() {
      _markers.clear();
      final marker = Marker(
        markerId: MarkerId('asda'),
        position: LatLng(24.916404, 67.130654),
        infoWindow: InfoWindow(
          title: 'dsaa',
          snippet: 'sss',
        ),
        icon: customMarker, // This replaces the default red marker!
      );
      _markers['saa'] = marker;
    });
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: AppBar(
          leading: GestureDetector(
              onTap:(){ Navigator.pop(context); },child: Icon(Icons.arrow_back)),
          centerTitle: true,
          flexibleSpace: Container(
            decoration: BoxDecoration(
              image: DecorationImage(
                image: AssetImage('images/nav.jpg'),
                fit: BoxFit.cover,
              ),
            ),
          ),
          backgroundColor: Colors.transparent,
          title: Text('My Location', style: TextStyle(fontFamily: 'UbuntuBold'),),
          actions: [
            Padding(
              padding: const EdgeInsets.only(right: 15),
              child: Icon(
                Icons.notifications_none,
                size: 33,
              ),
            )
          ]),
      body: GoogleMap(
        mapType: MapType.normal,
        initialCameraPosition: CameraPosition(
          target: currentPostion,
          zoom: 20,
        ),
        markers: _markers.values.toSet(),
      ),
    );
  }
}

Quick Tips: #

• Double-check your image path matches exactly what's in pubspec.yaml—if you put the image directly in the images folder (not nested in assets), use 'images/your_custom_marker.png' instead.
• The ImageConfiguration(size: Size(48,48)) lets you control the size of your marker. Tweak the numbers until it looks right on your map.
• If you need to use a network image instead of a local asset, use BitmapDescriptor.fromNetworkImage() instead.

内容的提问来源于stack exchange，提问作者rameez khan