flutter引入高德地图_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，然后在标签里，加入下面的代码:

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());

}classMyApp extends StatelessWidget {//This widget is the root of your application.

@override

Widget build(BuildContext context) {returnMaterialApp(

title:'Flutter Demo',

theme: ThemeData(

primarySwatch: Colors.blue,

),

home: MyHomePage(title:'高德地图测试'),

);

}

}classMyHomePage extends StatefulWidget {

MyHomePage({Key key,this.title}) : super(key: key);

final String title;

@override

_MyHomePageState createState()=>_MyHomePageState();

}class _MyHomePageState extends State{

AMapController _controller;

@override

Widget build(BuildContext context) {returnScaffold(

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,

),

),

);

}

}

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