如何在Flutter的谷歌地圖上設定自定義標記？-有解無憂

我想使用 AssetImage 設定自定義標記作為谷歌地圖上的標記圖示。我已經做了一個標記，但只是作為默認的 BitmapDescriptor。如何提供 AssetImage 作為標記的圖示？

這是我的代碼

import 'package:flutter/material.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';

class GMapPage extends StatefulWidget {
  const GMapPage({
    Key? key,
  }) : super(key: key);

  static CameraPosition initialCameraPosition = const CameraPosition(
    target: LatLng(
      50.07826619317443,
      8.239772862793647,
    ),
    zoom: 17,
  );

  @override
  State<GMapPage> createState() => _GMapPageState();
}

class _GMapPageState extends State<GMapPage> {
  late GoogleMapController _controller;
  final Set<Marker> _markers = {};

  void _onMapCreated(GoogleMapController controller) {
    _controller = controller;
    _markers.add(
      const Marker(
        markerId: MarkerId("id-1"),
        position: LatLng(
          50.07826619317443,
          8.239772862793647,
        ),
        icon: BitmapDescriptor.defaultMarker,
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: GoogleMap(
        initialCameraPosition: GMapPage.initialCameraPosition,
        markers: _markers,
        onMapCreated: _onMapCreated,
      ),
    );
  }
}

uj5u.com熱心網友回復：

這是從資產設定圖示的功能。

void setCustomIcons(BuildContext context) async {
    customIcon = await BitmapDescriptor.fromAssetImage(
          ImageConfiguration(devicePixelRatio: 2.0),
          'assets/images/custome_icon.png'
        );
   }

你可以試試

import 'package:flutter/material.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';

class GMapPage extends StatefulWidget {
  const GMapPage({
    Key? key,
  }) : super(key: key);

  static CameraPosition initialCameraPosition = const CameraPosition(
    target: LatLng(
      50.07826619317443,
      8.239772862793647,
    ),
    zoom: 17,
  );

  @override
  State<GMapPage> createState() => _GMapPageState();
}

class _GMapPageState extends State<GMapPage> {
  late GoogleMapController _controller;
  final Set<Marker> _markers = {};

  void _onMapCreated(GoogleMapController controller) {
    _controller = controller;
    _markers.add(
      const Marker(
        markerId: MarkerId("id-1"),
        position: LatLng(
          50.07826619317443,
          8.239772862793647,
        ),
        icon: BitmapDescriptor.fromAssetImage(
      ImageConfiguration(devicePixelRatio: 2.0),
      'assets/images/custome_icon.png'
    ),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: GoogleMap(
        initialCameraPosition: GMapPage.initialCameraPosition,
        markers: _markers,
        onMapCreated: _onMapCreated,
      ),
    );
  }
}

轉載請註明出處，本文鏈接：https://www.uj5u.com/net/492947.html

標籤：扑谷歌地图标记

上一篇：MySQLSQL查詢另一個表中的欄位總和

下一篇：沒有互聯網許可，但獲得了許可，當我使用admob橫幅時（它給出了一個紅色的底層表示我沒有許可）