Flutter地图标记插件google_map_marker的使用

Flutter 地图标记插件 google_map_marker 的使用

介绍

google_map_marker 是一个用于在 Flutter 中使用自定义标记（例如从资源文件中加载的图像）的新插件。该插件允许你轻松地将自定义图像作为地图上的标记。

使用方法

首先，确保你已经添加了 google_map_marker 和 google_maps_flutter 依赖项到你的 pubspec.yaml 文件中：

dependencies:
  flutter:
    sdk: flutter
  google_maps_flutter: ^2.0.6
  google_map_marker: ^1.0.0

接下来，你可以使用以下代码来实现自定义标记：

import 'dart:async';

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

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final Completer<GoogleMapController> _controller = Completer<GoogleMapController>();

  static const CameraPosition _kGooglePlex = CameraPosition(
    target: LatLng(37.42796133580664, -122.085749655962),
    zoom: 14.4746,
  );

  BitmapDescriptor? marker;

  List<Marker> markers = [];

  bool init = false;

  [@override](/user/override)
  void initState() {
    getMarker();
    super.initState();
  }

  getMarker() async {
    marker = await GoogleMapMarker.getMarker(context, "assets/cube_transparent.png");

    addMarker();

    setState(() {
      init = true;
    });
  }

  addMarker() {
    if(marker != null){
      markers.add(
        Marker(
            markerId: const MarkerId('0'),
            icon: marker!,
            position: const LatLng(37.42796133580664, -122.085749655962)),
      );
    }
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: init
          ? GoogleMap(
              mapType: MapType.hybrid,
              initialCameraPosition: _kGooglePlex,
              markers: markers.toSet(),
              onMapCreated: (GoogleMapController controller) {
                _controller.complete(controller);
              },
            )
          : const Center(
              child: CircularProgressIndicator(),
            ),
    );
  }
}

更多关于Flutter地图标记插件google_map_marker的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter地图标记插件google_map_marker的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，以下是如何在Flutter中使用google_maps_flutter插件来实现地图标记（Marker）的示例代码。需要注意的是，google_maps_flutter插件实际上包含了地图的显示和标记功能，而并没有一个单独的google_map_marker插件。以下是一个完整的示例，展示如何在Flutter应用中使用google_maps_flutter来显示地图并在地图上添加标记。

首先，确保在你的pubspec.yaml文件中添加google_maps_flutter依赖：

dependencies:
  flutter:
    sdk: flutter
  google_maps_flutter: ^2.1.1  # 请检查最新版本号

然后，运行flutter pub get来安装依赖。

接下来，在你的Flutter项目中创建一个新的Dart文件（例如map_screen.dart），并添加以下代码：

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

class MapScreen extends StatefulWidget {
  @override
  _MapScreenState createState() => _MapScreenState();
}

class _MapScreenState extends State<MapScreen> {
  late GoogleMapController _controller;
  late LatLng _center;
  Set<Marker> _markers = {};

  @override
  void initState() {
    super.initState();
    _center = LatLng(-34.397, 150.644);  // 默认中心点，例如悉尼
  }

  void _onMapCreated(GoogleMapController controller) {
    _controller = controller;
    // 添加标记
    setState(() {
      _markers.add(
        Marker(
          markerId: MarkerId('marker_id_1'),
          position: _center,
          infoWindow: InfoWindow(title: 'Sydney', snippet: 'Australia'),
        ),
      );
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Google Maps Example'),
      ),
      body: GoogleMap(
        mapType: MapType.normal,
        initialCameraPosition: CameraPosition(
          target: _center,
          zoom: 11.0,
        ),
        onMapCreated: _onMapCreated,
        markers: _markers,
      ),
    );
  }
}

最后，在你的主应用文件（例如main.dart）中引入并使用这个新的MapScreen组件：

import 'package:flutter/material.dart';
import 'map_screen.dart';  // 引入map_screen.dart文件

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Google Maps Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MapScreen(),  // 使用MapScreen作为首页
    );
  }
}

运行这个Flutter应用，你应该能看到一个包含悉尼市中心标记的Google地图。这个示例展示了如何初始化地图、设置中心点、创建地图控制器以及在地图上添加标记。你可以根据需要进一步扩展这个示例，例如添加更多的标记、处理用户交互等。

回到顶部