如何在Google地图上设置自定义标记?

发布于 2025-02-08 09:56:29 字数 1276 浏览 1 评论 0原文

我想将具有资产图像的自定义标记设置为Google地图上的标记图标。我已经制作了一个标记,但仅是默认的bitmapdescriptor。我如何提供作为标记图标的资产图像?

这是我的代码

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,
      ),
    );
  }
}

I want to set custom Markers with an AssetImage as the Marker icon on the Google Map. I already made a marker but only as a default BitmapDescriptor. How can i provide an AssetImage as the Icon for the Marker?

This is my code

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,
      ),
    );
  }
}

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

梅倚清风 2025-02-15 09:56:29

这是从资产设置图标的函数。

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,
      ),
    );
  }
}

here's a function to set icons from assets.

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

you can try

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,
      ),
    );
  }
}
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文