Flutter 高德地图插件的使用

高德地图使用的插件叫amap_base_flutter，也是国内用的最多的地图一个插件。

1.注册和建立高德API应用

需要先注册一个账号，这个需要到高德的网站进行，网站地址为：https://lbs.amap.com/。

有了账号之后到控制台-应用管理-创建应用。

2.获得SHA1

在创建应用的时候，需要填入SHA1，这个必须需要在Android Studio里进行，VS Code里还没有摸清如何获得，如果你知道如何获得，可以文章下方留言。

3.获得PackageName

这个的获得比较简单，打开/android/app/build.gradle文件，然后找到applicationId，这个就是packageName，比如我的项目的packageName就是com.example.amap_test。

把这两项填写好后，我们就可以开心的编写程序了。

4.配置AndoridManifest.xml文件

这个文件在/android/app/src/main/AndroidManifest.xml，然后在<activity>标签里，加入下面的代码:

<meta-data
  android:name="com.amap.api.v2.apikey"
  android:value="自己的key" />

5.编写代码

需要先进入根目录的pubspec.yaml文件，进行依赖注册，这个package下载还是需要挺长时间的。

amap_base: ^0.3.5

写完后点击右上角的packages get，剩下的就是耐心等待。

进入lib/main.dart文件，写入下面代码。

进的要用import引入amap_base.dart文件。

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

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

}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(

        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: '高德地图测试'),
    );
  }
}


class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  AMapController _controller;

  @override
  Widget build(BuildContext context) {

    return Scaffold(
      appBar: AppBar(

        title: Text(widget.title),
      ),
      body:AMapView(
              onAMapViewCreated: (controller) {
                _controller = controller;
              },
              amapOptions: AMapOptions(
                compassEnabled: false,
                zoomControlsEnabled: true,
                logoPosition: LOGO_POSITION_BOTTOM_CENTER,
                camera: CameraPosition(
                  target: LatLng(41.851827, 112.801637),
                  zoom: 4,
                ),
              ),
          
     );
  }

}

写完代码后，你要记得不要使用虚拟机进行测试，我在学习的时候，就是使用虚拟机测试，一直是黑屏，后来采用了真机测试，才能出现效果。