目前支持Flutter的第三方库还不多,地图作为一个高频使用的功能非常重要,但是国内常用的百度、高德都还没有官方的支持,只能找第三方库来支持。而第三方库目前做不到完全支持,像一些自定义地图和marker的绘制就很难搞定,只能进行定位和常规地图展示、搜索。
目前比较常用的有 flutter_amap_location 和 amap_base_flutter
① flutter_amap_location的集成使用
一、申请APIkey
前往 https://lbs.amap.com/api/android-sdk/guide/create-project/get-key 申请APIkey,新建一个应用,分别添加key,其中要获取SHA1值。
-
Mac下AndroidStudio获取SHA1值:
第一步、打开Android Studio的Terminal工具;
第一步、输入命令:cd ~/.android ;
第二步、输入命令:keytool -list -v -keystore debug.keystore ;
第四步、输入Keystore密码,一般直接回车就行,或者输入android。
这里就获取到SHA1值,就可以在高德地图后台申请APIkey了。
而packageName就在build.gradle(app)里,取applicationId。
-
获取iOS Bundle identifier:
用XCode打开我们的项目,按图获取到Bundle identifier
在后台填入添加key。
二、配置集成高德地图
添加依赖,无须填版本号
dependencies:
amap_location:
导入包
import 'package:amap_location/amap_location.dart';
Android配置,在build.gradle(app)中添加AMAP_KEY即可。
android {
.... 你的代码
defaultConfig {
.....
manifestPlaceholders = [
AMAP_KEY : "xxxxxx", /// 高德地图key
]
}
iOS配置,在程序的主入口 main.dart
void main() {
AMapLocationClient.setApiKey("xxxxxx");
runApp(new MyApp());
}
在info.Plist添加权限
<key>NSLocationWhenInUseUsageDescription</key>
<string>需要用到定位</string>
<key>UIBackgroundModes</key>
<array>
<string>location</string>
</array>
三、代码调用
上一步提到了在main.dart设置iOS的key
void main() {
AMapLocationClient.setApiKey("xxxxxx");
runApp(new MyApp());
}
再在需要使用到的页面进行定位初始化,这里实现的功能比较简单,每次监听到坐标就赋值给lat和long,在Text中打印坐标
//初始化定位监听,
void _initLocation() async {
AMapLocationClient.startup(new AMapLocationOption(
desiredAccuracy: CLLocationAccuracy.kCLLocationAccuracyHundredMeters));
//监听坐标实时变换
AMapLocationClient.onLocationUpate.listen((AMapLocation loc) {
if (!mounted) return;
setState(() {
lat = loc.latitude;
long = loc.longitude;
});
});
AMapLocationClient.startLocation();
}
当前代码并没有对权限进行判断,若运行后lat、long打印出来是null,去设置里查看下是否打开了定位权限。如果有其他问题,查看loc.code,根据code去官网查看对应错误。
四、关闭定位
最后在dispose中关闭定位,防止内存泄漏
@override
void dispose() {
//注意这里关闭
AMapLocationClient.shutdown();
super.dispose();
}
但是目前为止只能进行定位,没办法进行地图展示等功能,功能不够丰富。
② amap_base_flutter的集成使用
amap_base_flutter包含的功能更多,不仅仅是定位,还集成了简单的地图展示、导航、搜索等功能,使用上和上个库也差不多,github上还有相关的demo: https://github.com/OpenFlutter/amap_base_flutter/tree/master/example/lib。
一、申请APIkey
APIkey的申请同上,申请过的话就直接用已经有的key。
二、添加依赖
添加依赖和flutter_amap_location差不多,在Android和iOS分别设置APPkey,需要权限的话,分别在配置文件中添加。
添加dependencies
amap_base: ^0.2.12
导入包
import 'package:amap_base/amap_base.dart';
Android配置
在AndroidManifest.xml中设置appkey,注意设置在application节点下
<application>
...
<meta-data
android:name="com.amap.api.v2.apikey"
android:value="您的Key"/>
</application>
iOS配置同上,在程序的主入口 main.dart
void main() {
AMap.init('您的Key');
runApp(new MyApp());
}
另外显示地图的话需要另外设置,iOS端的UiKitView目前还只是preview状态, 默认是不支持的, 需要手动打开开关, 在info.plist文件中新增一行io.flutter.embedded_views_preview为true.
三、代码调用
核心代码
final _amapLocation = AMapLocation();
var _result = '';
//初始化定位监听
void _initLocation() async {
_amapLocation.init();
final options = LocationClientOptions(
isOnceLocation: false,
locatingWithReGeocode: true,
);
if (await Permissions().requestPermission()) {
_amapLocation.startLocate(options).listen((_) => setState(() {
_result =
'坐标:${_.longitude},${_.latitude} @ ${DateTime.now().hour}:${DateTime.now().minute}:${DateTime.now().second}';
}));
} else {
setState(() {
_result = "无定位权限";
});
}
}
比上个库好的是它自带了一个权限检测的方法。
四、关闭定位
最后在dispose中关闭定位,防止内存泄漏
@override
void dispose() {
//注意这里关闭
_amapLocation.stopLocate();
super.dispose();
}