Flutter 高德SDK对接(定位,地图,导航)

1.下载依赖

# 高德-仅地图
amap_map_fluttify: ^0.10.1+e42cd2f
# 高德-仅定位
amap_location_fluttify: 0.3.2+97873c8
# 高德-仅搜索
amap_search_fluttify: ^0.3.4+97873c8

2.iOSInfo.plist配置

/// 使用PlatformView的声明
<key>io.flutter.embedded_views_preview</key>
<string>YES</string>
/// 定位权限声明
<key>NSLocationWhenInUseUsageDescription</key>
<string>需要定位权限</string>
/// 高德地图app白名单 打开高德地图时使用
<key>LSApplicationQueriesSchemes</key>
<array>
    <string>iosamap</string>
</array>

iOS在init方法中设置

await AmapCore.init('7a04506d15fdb7585707f7091d715ef4');

3.Android配置

Android需要在AndroidManifest.xml里去设置,

 <application>
   <meta-data
     android:name="com.amap.api.v2.apikey"
     android:value="您的Key"/>
 </application>

简单使用

import 'package:amap_map_fluttify/amap_map_fluttify.dart';

/// 地图
///
/// created by hujintao
/// created at 2019-12-03
//

import 'package:flutter/material.dart';
import 'package:fpdxapp/utils/location.dart';

class MapPage extends StatefulWidget {
 @override
 _MapPageState createState() => _MapPageState();
}

class _MapPageState extends State<MapPage> {
 AmapController _controller;

 @override
 Widget build(BuildContext context) {
   return AmapView(
     // 地图类型
     mapType: MapType.Standard,
     // 是否显示缩放控件
     showZoomControl: true,
     // 是否显示指南针控件
     showCompass: true,
     // 是否显示比例尺控件
     showScaleControl: true,
     // 是否使能缩放手势
     zoomGesturesEnabled: true,
     // 是否使能滚动手势
     scrollGesturesEnabled: true,
     // 是否使能旋转手势
     rotateGestureEnabled: true,
     // 是否使能倾斜手势
     tiltGestureEnabled: true,
     // 缩放级别
     zoomLevel: 10,
     // 中心点坐标
     centerCoordinate: LatLng(39, 116),
     // 标记
     markers: <MarkerOption>[],
     // 标识点击回调
//      onMarkerClick: (Marker marker) {},
//      // 地图点击回调
//      onMapClick: (LatLng coord) {},
//      // 地图拖动回调
//      onMapDrag: (MapDrag drag) {},
     // 地图创建完成回调
     onMapCreated: (controller) async {
       _controller = controller;
       // requestPermission是权限请求方法, 需要你自己实现
       // 如果不知道怎么处理, 可以参考example工程的实现, example过程依赖了`permission_handler`插件.
       await _controller.requireAlwaysAuth();
       await _controller.setZoomLevel(17.0);
       await controller.showMyLocation(true);
     },
   );
 }
}

报错补充

1.[VERBOSE-2:platform_view_layer.cc(22)] Trying to embed a platform view but the PrerollContext does not support embedding

要在你的 info.plist中添加

<key>io.flutter.embedded_views_preview</key><true/>

2.iOS黑屏

6F413E7E17329E56EF9FCA790AE29961.png

原因分析

如果是使用ojbc创建的flutter项目，但是如果接入了 audio_recorder 这个框架，在执行 pod install 之后，Podfile还是会自动加上 use_frameworks!，然后地图就显示不出来了

解决办法

• 找到Pods下的amap_map_fluttify文件夹
• 打开amap_map_fluttify.podspec
• 添加 s.static_framework = true

#
# To learn more about a Podspec see http://guides.cocoapods.org/syntax/podspec.html
#
Pod::Spec.new do |s|
  s.name             = 'amap_map_fluttify'
  s.version          = '0.0.1'
  s.summary          = 'An `Amap` Map Component, Powered By `Fluttify` Engine.'
  s.description      = <<-DESC
A new flutter plugin project.
                       DESC
  s.homepage         = 'https://github.com/fluttify-project/amap_map_fluttify'
  s.license          = { :file => '../LICENSE' }
  s.author           = { 'yohom' => '382146139@qq.com' }
  s.source           = { :path => '.' }
  s.source_files = 'Classes/**/*'
  s.public_header_files = 'Classes/**/*.h'
  s.dependency 'Flutter'
  s.dependency 'foundation_fluttify'
  # flutter plugin dependency
  s.dependency 'amap_core_fluttify'
  s.dependency 'url_launcher'

  s.ios.deployment_target = '8.0'
  # include project framework
  s.vendored_frameworks = '**/*.framework'
  # include project .a
  s.vendored_libraries = '**/*.a'
  # ios system framework
  s.frameworks = [
        "QuartzCore", "CoreLocation", "SystemConfiguration", "CoreTelephony", "Security", "OpenGLES", "CoreText", "CoreGraphics", "GLKit"
  ]
  # ios system library
  s.libraries = [
        "z", "c++"
  ]
  # 关键代码-----------------
  s.static_framework = true
  # 关键代码-----------------
  # resources
  s.resources = '*.framework/*.bundle'
  # s.resource_bundles = {
  #   'amap_map_fluttify' => ['*.framework/*.bundle']
  # }
end

3.Android编译报错

• 找到android -> app -> build.gradle
• 注释掉：implementation 'com.amap.api:location:latest.integration'

dependencies {
    testImplementation 'junit:junit:4.12'
    androidTestImplementation 'androidx.test:runner:1.1.1'
    androidTestImplementation 'androidx.test.espresso:espresso-core:3.1.1'
    // 高德定位
    //implementation 'com.amap.api:location:latest.integration'
    compile 'com.growingio.android:vds-android-agent:autotrack-2.7.5@aar'
}

完美解决

最终效果图

附上参考文档

https://pub.flutter-io.cn/documentation/amap_map_fluttify/latest/

~未完待续