How to change the icon size of Google Maps marker in Flutter?

前端 未结 14 790
不知归路
不知归路 2020-12-07 12:32

I am using google_maps_flutter in my flutter app to use google map I have custom marker icon and I load this with BitmapDescriptor.fromAsset(\"images/car.

14条回答
  •  天涯浪人
    2020-12-07 13:15

    BitmapDescriptor.fromAsset() is the correct way to add markers, with one open bug that affects your code. As Saed answered, you need to provide different sizes of the image for different device screen densities. From the image you provided, I would guess the base size for the image you want would be about 48 pixels. So you would need to make copies of sizes, 48, 96 (2.0x), and 144 (3.0x).

    The runtime should select the correct one depending on screen density. See https://flutter.dev/docs/development/ui/assets-and-images#declaring-resolution-aware-image-assets.

    This is not done automatically on Android or Fuschia at the moment. If you are releasing now and want to work around this, you can check the platform using the following logic:

        MediaQueryData data = MediaQuery.of(context);
        double ratio = data.devicePixelRatio;
    
        bool isIOS = Theme.of(context).platform == TargetPlatform.iOS;
    

    If the platform is not iOS, you would implement the buckets in your code. Combining the logic into one method:

    String imageDir(String prefix, String fileName, double pixelRatio, bool isIOS) {
        String directory = '/';
        if (!isIOS) {
            if (pixelRatio >= 1.5) {
                directory = '/2.0x/';
            }
            else if (pixelRatio >= 2.5) {
                directory = '/3.0x/';
            }
            else if (pixelRatio >= 3.5) {
                directory = '/4.0x/';
            }
        }
        return '$prefix$directory$fileName';
    }
    

    You could then create a marker for an icon named person_icon in the assets directory **assets/map_icons/**with this code, using the method:

                myLocationMarker = Marker(
                markerId: MarkerId('myLocation'),
                position: showingLocation, flat: true,
                icon: BitmapDescriptor.fromAsset(imageDir('assets/map_icons','person_icon.png', ratio, isIos)));
    

提交回复
热议问题