【flutter】整合高德地图amap

可参考官方的demo
1、第三方依赖

amap_base_map: ^0.4.4+1

测试的时候，发现本本冲突，主版本为解决冲突，改用develop分支（）
base分支功能不全，
但是amap_base_map存在错误，需要注释修改元代码。
map/android/src/main/kotlin/me/yohom/amapbasemap/map/MapHandlers.kt

object OpenOfflineManager : MapMethodHandler {override fun with(map: AMap): MapMethodHandler {return this}//报错代码注释override fun onMethodCall(methodCall: MethodCall, methodResult: MethodChannel.Result){}/*override fun onMethodCall(p0: MethodCall?, p1: MethodChannel.Result?) {registrar.activity().startActivity(Intent(AMapBaseMapPlugin.registrar.activity(),OfflineMapActivity::class.java))}*/
}

amap_base:git:url: https://github.com/yohom/amap_base_flutter.gitref: developpath: base

2、
\app\src\main\AndroidManifest.xml

 <!--定位权限（）--><uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" /><uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" /><applicationandroid:name="io.flutter.app.FlutterApplication"android:label="flutter_01"android:icon="@mipmap/ic_launcher"><meta-dataandroid:name="com.amap.api.v2.apikey"android:value="高德地图的key"/></application>

3、简单显示地图
功能：1、地图显示。
2、标注。
3、获取去当前位置。
4、简单权限判断。

import 'package:flutter/material.dart';
import 'package:amap_base_map/amap_base_map.dart'; //高德地图amap_base_map
import 'package:amap_base_location/amap_base_location.dart'; //高德地图amap_base_location
import 'dart:math';
import 'package:fluttertoast/fluttertoast.dart'; //提示框
import 'package:permission_handler/permission_handler.dart';//权限
/*** ShowMapScreen* 地图缩放* 标注*/
class ShowMapScreen extends StatefulWidget {@override_ShowMapScreenState createState() => _ShowMapScreenState();
}
const markerList = const [LatLng(30.308802, 120.071179),LatLng(30.2412, 120.00938),LatLng(30.296945, 120.35133),LatLng(30.328955, 120.365063),LatLng(30.181862, 120.369183),
];
class _ShowMapScreenState extends State<ShowMapScreen> {AMapController _controller;final _amapLocation = AMapLocation();//定位double lat ;double lng ;@overridevoid initState() {_getLocation();super.initState();}@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: const Text('绘制点标记'),backgroundColor: Colors.black,centerTitle: true,),body: Builder(builder: (context) {return AMapView(onAMapViewCreated: (controller) {_controller = controller;//插件代码报错，剪到本地git，有修改。_controller.mapClickedEvent.listen((it){//处理点击事件//清空标记_controller.clearMarkers();//标点_controller.addMarker(MarkerOptions(position: it,));//缩放定位_controller.changeLatLng(it);});//点击标注图标执行/*controller..addMarkers(markerList.map((latLng) =>MarkerOptions(icon: 'images/home_map_icon_positioning_nor.png',position: latLng,title: '哈哈',snippet: '呵呵',object: '测试数据$latLng',)).toList(),)..setZoomLevel(10);*/},amapOptions:AMapOptions(compassEnabled: false,zoomControlsEnabled: true,logoPosition: LOGO_POSITION_BOTTOM_CENTER,camera: CameraPosition(target: LatLng(40.851827, 111.801637),zoom: 15,),),);},),floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,floatingActionButton: FloatingActionButton(child: Icon(Icons.add),onPressed: () async {_getLocation();//_clearLocation();/*final nextLatLng = _nextLatLng();await _controller.addMarker(MarkerOptions(position: nextLatLng,));await _controller.changeLatLng(nextLatLng);*/},),);}@overridevoid dispose() {_controller.dispose();super.dispose();}
//随机生成经纬度LatLng _nextLatLng() {final _random = Random();double nextLat = (301818 + _random.nextInt(303289 - 301818)) / 10000;double nextLng = (1200093 + _random.nextInt(1203691 - 1200093)) / 10000;return LatLng(nextLat, nextLng);}//清空标记_clearLocation(){//_controller.clearMap();_controller.clearMarkers();}//定位标记_getLocation()async{_amapLocation.init();final options = LocationClientOptions(isOnceLocation: true,locatingWithReGeocode: true,);//监听可以获取位置_amapLocation.startLocate(options).listen((location) => setState(() {lat = location.latitude;lng = location.longitude;if(lat>0&&lng>0){checkPersmission();}else{getFloat('获取位置失败，请检测GPS是否开启！');}}));}//是否开启权限void checkPersmission() async {// 申请权限Map<PermissionGroup, PermissionStatus> permissions =await PermissionHandler().requestPermissions([PermissionGroup.location]);// 申请结果PermissionStatus permission =await PermissionHandler().checkPermissionStatus(PermissionGroup.location);if (permission == PermissionStatus.granted) {///地图标注final nextLatLng = LatLng(lat, lng);//清空标记_controller.clearMarkers();//标点_controller.addMarker(MarkerOptions(position: nextLatLng,));//缩放定位_controller.changeLatLng(nextLatLng);} else {getFloat('请打开GPS和允许定位权限');}}//判空bool isNotEmpty(var text){if(text==null||text.toString().isEmpty||text.toString()=='null'||text.toString()==null){return false;}else{return true;}}//提示框getFloat(String text) {Fluttertoast.showToast(msg: text,toastLength: Toast.LENGTH_SHORT,gravity: ToastGravity.CENTER,timeInSecForIos: 2,fontSize: 16.0);}
}

4、绘制线路
另外引入插件

decorated_flutter: ^0.6.1   #绘制地图时用

测试代码

import 'package:amap_base_location/amap_base_location.dart'; //高德地图amap_base_location
import 'package:amap_base_map/amap_base_map.dart'; //高德地图amap_base_map
import 'package:decorated_flutter/decorated_flutter.dart'; //绘制图形时用
import 'package:flutter/material.dart';/*** DrawMapScreen* 地图缩放* 标注*/
class DrawMapScreen extends StatefulWidget {@override_DrawMapScreenState createState() => _DrawMapScreenState();
}class _DrawMapScreenState extends State<DrawMapScreen> {AMapController _controller;final _amapLocation = AMapLocation(); //定位double lat;double lng;//List<LatLng> markerList = [];@overridevoid initState() {super.initState();}@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: const Text('绘制轨迹'),backgroundColor: Colors.black,centerTitle: true,),body: Builder(builder: (context) {return AMapView(onAMapViewCreated: (controller) {_controller = controller;//插件代码报错，剪到本地git，有修改。_controller.mapClickedEvent.listen((it) {//保存坐标markerList.add(it);//清空标记//_controller.clearMarkers();//标点_controller.addMarker(MarkerOptions(position: it,));//缩放定位_controller.changeLatLng(it);});},amapOptions: AMapOptions(compassEnabled: false,zoomControlsEnabled: true,logoPosition: LOGO_POSITION_BOTTOM_CENTER,camera: CameraPosition(target: LatLng(39.909502146634765, 116.39765137983694),//定位到天安门的坐标zoom: 10,),),);},),floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,floatingActionButton: FloatingActionButton(child: Icon(Icons.add),onPressed: () async {//绘制图形_drawLine();},),);}//绘制图形_drawLine() {if (markerList.length > 0) {//清空标记_controller.clearMarkers();//起点图标标注_controller.addMarker(MarkerOptions(position: markerList[0],icon: 'images/start.png',title: '开始',snippet: '呵呵',object: '测试数据',));if (markerList.length > 1) {//终点图标标注_controller.addMarker(MarkerOptions(position: markerList[markerList.length-1],icon: 'images/end.png',title: '开始',snippet: '呵呵',object: '测试数据',));}loading(context,_controller.addPolyline(PolylineOptions(latLngList: markerList,color: Colors.red,isDottedLine: true,isGeodesic: true,dottedLineType: DOTTED_LINE_TYPE_CIRCLE,width: 10,),)).catchError((e) => showError(context, e.toString()));}}@overridevoid dispose() {_controller.dispose();super.dispose();}
}

【flutter】整合高德地图amap_base相关推荐

flutter集成高德地图获取位置
flutter集成高德地图获取位置准备工作在创建安卓应用获取SHA1 获取当前位置添加依赖文件配置 build.gradle文件配置 AndroidManifest.xml配置获取定位准 ...
flutter踩坑高德地图amap_base
参考这篇简书:https://www.jianshu.com/p/714efea0927e flutter中使用高德地图的amap_base插件,报错,搞了老半天,还是上网的原因修改项目文件夹下的a ...
flutter引入高德地图_Flutter笔记-调用原生IOS高德地图sdk
一.前言 2017年底因公司业务组合部门调整,新的团队部分维护的项目用React Native技术混合开发.为适应环境变化,开启疯狂RN学习之旅,晚上回来啃资料看视频.可能由于本身对RN技术体验不感冒 ...
flutter 使用高德地图选取位置
使用了两个官方插件: amap_flutter_map | Flutter Package amap_flutter_location | Flutter Package #高德定位 amap_flu ...
flutter引入高德地图_玩玩Flutter Web —— 实现高德地图插件
Red Deer 1.啰嗦几句去年写了一个功能简单的高德地图插件给flutter_deer使用,当时支持了Android与iOS两端.前一阵子有一个issue问是否会支持Flutter Web,当时 ...
Flutter 调用高德地图APP实现位置搜索、路线规划、逆地理编码
1 开发准备 pubspec.yaml 配置文件中添加插件 dependencies:flutter:sdk: flutterurl_launcher: ^6.1.2 iOS 配置 info.plis ...
微信小程序整合高德地图获取定位经纬度信息
1.登录高德地图https://lbs.amap.com/ a.创建新应用这个key后边整合的时候会用到,精彩继续 b.下载SDK https://lbs.amap.com/api/wx/down ...
flutter引入高德地图_flutter配置高德地图SDK
在项目目录 android/app目录下build.gradle 文件内添加如下代码 android { defaultConfig { manifestPlaceholders = [ LOCATI ...
Android 整合高德地图SDK实现地图预览,定位,模拟导航
一.准备工作 1. 到高德地图官方网申请key: 我的应用 | 高德控制台 2. 申请key方法请参考:获取Key-创建工程-开发指南-Android 地图SDK | 高德地图API 3. 出现的问题 ...
flutter引入高德地图_Flutter引入高德地图插件黑屏/白屏
|:-| totem 1.黑屏缺少相关的"地图资源assert" 2.白屏无网络举例说明 1.黑屏 buildTypes 配置: buildTypes { debug { / ...

【flutter】整合高德地图amap_base

【flutter】整合高德地图amap_base相关推荐

最新文章

热门文章