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, ), ), ); } }
写完代码后,你要记得不要使用虚拟机进行测试,我在学习的时候,就是使用虚拟机测试,一直是黑屏,后来采用了真机测试,才能出现效果。