Flutter中如何为Google Map固定经纬度添加自定义图片标记？

Hey there! Swapping that default red marker for your custom image is totally straightforward with the Google Maps Flutter plugin. Let’s walk through exactly what you need to change in your code:

Step 1: Prep Your Image & Update pubspec.yaml #

First, add your custom marker image to your project’s assets folder (create the folder if it doesn’t exist). Then, declare the asset in your pubspec.yaml so Flutter can locate it:

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

Step 2: Modify Your Marker Code #

The core change is using BitmapDescriptor.fromAssetImage to load your custom image and assign it to the icon property of the Marker widget. Since loading assets is asynchronous, we’ll adjust the _onMapCreated method to handle this properly.

Here’s your full updated code:

class _MapScreenState extends State<MapScreen> {
  Completer<GoogleMapController> _controller = Completer();
  final currentPostion = LatLng(24.916404, 67.130654);
  final Map<String, Marker> _markers = {};

  @override
  void initState() {
    super.initState();
    _onMapCreated();
  }

  // Make this method async to handle image loading
  Future<void> _onMapCreated() async {
    // Load your custom marker image
    final BitmapDescriptor customMarker = await BitmapDescriptor.fromAssetImage(
      ImageConfiguration(size: Size(48, 48)), // Adjust size to control marker display
      'images/your_custom_marker.png', // Match the path from pubspec.yaml
    );

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

  @override
  Widget build(BuildContext context) {
    return 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: #

• Adjust Marker Size: The ImageConfiguration(size: Size(48, 48)) lets you control how large the marker appears on the map. Tweak the numbers to get your preferred size.
• Double-Check Paths: Make sure the image path in fromAssetImage matches exactly what you wrote in pubspec.yaml — typos here are the most common reason for missing markers.
• Network Images: If your marker is hosted online instead of local, use BitmapDescriptor.fromNetwork('https://your-image-url.com/marker.png') instead of fromAssetImage.

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