Flutter中的Marker：地图标记的实现

Flutter中的Marker：地图标记的实现

5 回复

在Flutter中，Marker用于在地图上标记位置，通过插件如google_maps_flutter实现。

更多关于Flutter中的Marker：地图标记的实现的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter中，使用google_maps_flutter包可以轻松实现地图标记。通过Marker类定义标记的位置、图标和ID，然后将其添加到GoogleMap的markers集合中即可显示。

在Flutter中，使用google_maps_flutter包可以轻松实现地图标记（Marker）。首先，确保在pubspec.yaml中添加依赖。然后，在GoogleMap组件中，通过markers属性添加标记。每个Marker需要指定markerId、position（经纬度）等属性。例如：

GoogleMap(
  initialCameraPosition: CameraPosition(
    target: LatLng(37.42796133580664, -122.085749655962),
    zoom: 14.0,
  ),
  markers: {
    Marker(
      markerId: MarkerId('marker_1'),
      position: LatLng(37.42796133580664, -122.085749655962),
      infoWindow: InfoWindow(title: 'Marker Title'),
    ),
  },
);

这样，地图上就会显示一个标记。

在Flutter中，使用google_maps_flutter插件实现Marker地图标记。

在Flutter中，Marker通常用于在地图上标记特定的位置。你可以使用google_maps_flutter插件来实现这一功能。以下是如何在Flutter中创建和添加Marker到地图上的基本步骤：

1. 添加依赖

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

dependencies:
  flutter:
    sdk: flutter
  google_maps_flutter: ^2.1.1

2. 获取API密钥

你需要在Google Cloud Platform上创建一个项目并启用Maps SDK for Android和iOS，然后获取API密钥。

3. 配置API密钥

在AndroidManifest.xml（位于android/app/src/main/目录下）中添加以下代码：

<meta-data
    android:name="com.google.android.geo.API_KEY"
    android:value="YOUR_API_KEY"/>

在AppDelegate.swift（位于ios/Runner/目录下）中添加以下代码：

GMSServices.provideAPIKey("YOUR_API_KEY")

4. 创建地图并添加Marker

在你的Flutter应用中，你可以使用GoogleMap widget来显示地图，并使用Marker来标记特定位置。

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

class MapSample extends StatefulWidget {
  @override
  _MapSampleState createState() => _MapSampleState();
}

class _MapSampleState extends State<MapSample> {
  GoogleMapController mapController;

  final LatLng _center = const LatLng(37.7749, -122.4194); // 旧金山坐标

  final Set<Marker> _markers = {};

  void _onMapCreated(GoogleMapController controller) {
    mapController = controller;

    setState(() {
      _markers.add(
        Marker(
          markerId: MarkerId("sf"),
          position: _center,
          infoWindow: InfoWindow(
            title: 'San Francisco',
            snippet: 'City in California',
          ),
        ),
      );
    });
  }

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

void main() => runApp(MaterialApp(
  home: MapSample(),
));

5. 运行应用

运行你的Flutter应用，你应该会看到一个显示旧金山地图的界面，并且在地图上有一个标记。

解释

  • GoogleMap widget用于显示地图。
  • Marker用于在地图上标记特定的位置。
  • onMapCreated回调在地图创建完成后触发，用于控制地图和添加标记。

通过这些步骤，你可以在Flutter应用中轻松实现地图标记功能。

回到顶部