Flutter优雅嵌入高德地图，助力你构建绚烂APP

2023-10-06 20:48:30

Flutter集成高德地图

1. 引入高德地图Flutter插件

首先，在您的Flutter项目中添加高德地图Flutter插件。您可以通过以下命令在终端中进行操作：

flutter pub add amap_location

添加完成后，您需要在项目根目录下的pubspec.yaml文件中添加高德地图Flutter插件的依赖项：

dependencies:
  amap_location: ^0.14.0+1

2. 配置高德地图API密钥

接下来，您需要配置高德地图API密钥。您可以访问高德地图开发者官网（https://lbs.amap.com/api）申请密钥。

3. 初始化高德地图Flutter插件

在Flutter项目中，您需要在main.dart文件中初始化高德地图Flutter插件。代码示例如下：

import 'package:amap_location/amap_location.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await AmapLocation.init(
    iosKey: '您的iOS API密钥',
    androidKey: '您的Android API密钥',
  );
  runApp(MyApp());
}

4. 集成高德地图

现在，您就可以在Flutter项目中集成高德地图了。您可以使用AmapView小部件来显示地图。代码示例如下：

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

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: AmapView(
        center: LatLng(39.90923, 116.397428),
        zoomLevel: 15,
      ),
    );
  }
}

Flutter高德地图自定义Marker

1. 创建自定义Marker

您可以使用Marker小部件来创建自定义Marker。代码示例如下：

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

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: AmapView(
        center: LatLng(39.90923, 116.397428),
        zoomLevel: 15,
        markers: [
          Marker(
            position: LatLng(39.90923, 116.397428),
            icon: 'assets/images/marker.png',
            title: '北京',
            snippet: '中国的首都',
            draggable: true,
            onTap: (LatLng position) {
              print('Marker tapped at $position');
            },
          ),
        ],
      ),
    );
  }
}

2. 自定义Marker样式

您可以使用MarkerOptions类来自定义Marker的样式。代码示例如下：

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

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: AmapView(
        center: LatLng(39.90923, 116.397428),
        zoomLevel: 15,
        markers: [
          Marker(
            position: LatLng(39.90923, 116.397428),
            icon: 'assets/images/marker.png',
            title: '北京',
            snippet: '中国的首都',
            draggable: true,
            options: MarkerOptions(
              anchor: Offset(0.5, 0.5),
              infoWindowAnchor: Offset(0.5, 0.5),
              rotation: 45,
              alpha: 0.5,
            ),
            onTap: (LatLng position) {
              print('Marker tapped at $position');
            },
          ),
        ],
      ),
    );
  }
}

3. 添加Marker动画

您可以使用MarkerAnimation类来添加Marker动画。代码示例如下：

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

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: AmapView(
        center: LatLng(39.90923, 116.397428),
        zoomLevel: 15,
        markers: [
          Marker(
            position: LatLng(39.90923, 116.397428),
            icon: 'assets/images/marker.png',
            title: '北京',
            snippet: '中国的首都',
            draggable: true,
            animation: MarkerAnimation(
              duration: 500,
              curve: Curves.easeIn,
            ),
            onTap: (LatLng position) {
              print('Marker tapped at $position');
            },
          ),
        ],
      ),
    );
  }
}