Flutter集成高德地图,看官方文档写的不是很清楚,有些功能还没有移植到Flutter上,导致集成的时候遇到一些问题,把遇到的问题记录下来,方便之后查询
-
导入库:
在flutter项目的pubspec.yaml中添加amap_flutter_map: ^3.0.0
,执行flutter pub get
安装对应的库;
安卓项目的build.gradle中添加implementation 'com.amap.api:3dmap:latest.integration'
,同步gradle文件;
iOS项目不用另外导入; -
添加权限:
安卓<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" /> <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/> <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" /> <uses-permission android:name="android.permission.READ_PHONE_STATE" /> <uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />
iOS
<key>NSLocationUsageDescription</key> <string>${PRODUCT_NAME}需要您的同意,才能访问您的位置信息</string> <key>NSLocationWhenInUseUsageDescription</key> <string>${PRODUCT_NAME}需要您的同意,才能访问您的位置信息</string>
-
使用:按照官方文档中的方式,添加AMapWidget组件,设置初始坐标即可显示地图;
//_signInfo {area: 500, point: 1, latitude: 31.163606, longtitude: 121.427078} AMapWidget( apiKey: const AMapApiKey(androidKey: Config.amapApiAndroidKey, iosKey: Config.amapApiIosKey), privacyStatement: const AMapPrivacyStatement(hasContains: true, hasShow: true, hasAgree: true), initialCameraPosition: CameraPosition( target: LatLng(_signInfo['latitude'], _signInfo['longtitude']), zoom: _mapZoomLevel, ), rotateGesturesEnabled: false, //myLocationStyleOptions: MyLocationStyleOptions(true, icon: BitmapDescriptor.fromIconPath('res/images/arrow.png')), markers: Set<Marker>.of(markerMap.values), polygons: Set<Polygon>.of(polygonMap.values), onMapCreated: (AMapController controller) { _mapController = controller; //普通地图审图号 _mapController?.getMapContentApprovalNumber().then((number) { setState(() { mapApprovalNumber = number; }); }); //目标位置标记 final marker = Marker( position: LatLng(_signInfo['latitude'], _signInfo['longtitude']), icon: BitmapDescriptor.fromIconPath('res/images/location.png'), infoWindow: const InfoWindow(title: "签到位置"), ); setState(() { markerMap[marker.id] = marker; }); //目标范围路径 _createPoints(); final polygon = Polygon( points: _polygonPoints, strokeColor: const Color(0xa64285f4), fillColor: const Color(0x334285f4), strokeWidth: 2, ); setState(() { polygonMap[polygon.id] = polygon; }); }, onLocationChanged: (AMapLocation location) { debugPrint("onLocationChanged: $location"); _lastLocation = location.latLng; final isIn = AMapTools.latLngIsInPolygon(location.latLng, _polygonPoints); if (isIn) { debugPrint("进入目标范围"); } }, )
-
AMapWidget的onLocationChanged回调里可以获取到当前位置,不用再单独导入定位sdk;
-
flutter高德地图sdk,没有绘制圆的方法,自己计算出圆上的点,使用多边形绘制;
void _createPoints() { double R = 6378137; int numpoints = 180; double phase = 2 * math.pi / numpoints; for (int i = 0; i < numpoints; i++) { ///计算坐标点 double dx = double.parse(_signInfo['area']) * math.cos(i * phase); double dy = double.parse(_signInfo['area']) * math.sin(i * phase); ///转换成经纬度 double dlng = dx / (R * math.cos(_signInfo['latitude'] * math.pi / 180) * math.pi / 180); double dlat = dy / (R * math.pi / 180); double newlng = _signInfo['longtitude'] + dlng; double newlat = _signInfo['latitude'] + dlat; _polygonPoints.add(LatLng(newlat, newlng)); } }
-
高德sdk退出崩溃,manifest里面的application标签加上
android:allowNativeHeapPointerTagging="false"
; -
现有的高德地图flutter插件功能还是不完善的,对比较复杂的功能可能还需要用原生来实现,希望之后sdk能增加多一些功能;
-
开发的时候遇到挺多问题的,通过搜索解决了,后面想记录的时候发现好多都忘记了,只能把最后正确的结果记录下来;之后开发的时候遇到问题,要尽快记录下来,有问题有解决方法才能更完善,也会帮助更多的人;
参考链接:
高德地图官方文档
绘制圆形区域
高德sdk退出崩溃问题解决方法链接
flutter高德地图sdk接入