Flutter 高德地图amap_flutter_map: ^3

image.png

这段时间在做flutter 框架 && Golang学习，所以没有做太多文章更新，接下来一段时间，会不定时更新地图相关使用，环信im通讯，flutter—Unity3D等一系列干货；

最后会推一个作者自己封装的 逻辑、视图完全分离的Flutter(NullSafe)开发框架：Dio+Getx+flutter_screenutil，内涵丰富常用工具，详细文档，可以做到小白立即上手节省大部分开发时间;

码友们跟随作者一起，白嫖flutter这一门so easy 赚钱工具吧！！

话不多少先上效果图

image.png

高德地图flutter插件官网：https://lbs.amap.com/api/flutter/guide/map-flutter-plug-in/map-flutter-info

1.注册开发者认证、创建应用、添加key

image.png

IOS 没啥好说的 直接添加bundled id 提交即可，这里说下Andriod的sha1，首先创建keystore这里推荐一篇文章：https://www.jianshu.com/p/749baa589d6c，将SHA1填入发布版，但下面还有个调试版所以问题在这如果不填这个就会 提示验证失败，所以获取调试版SHA1就显得尤为重要,如下图即可获取，由此key配置完

image.png

2.接下来配置权限

Andriod：

           <!--允许访问网络，必选权限-->
           <uses-permission android:name="android.permission.INTERNET" />  
          <!--允许获取粗略位置，若用GPS实现定位小蓝点功能则必选-->
         <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" /> 
         <!--允许获取设备和运营商信息，用于问题排查和网络定位，若无gps但仍需实现定位小蓝点功能则此权限必选-->
         <uses-permission android:name="android.permission.READ_PHONE_STATE" />    
          <!--允许获取网络状态，用于网络定位，若无gps但仍需实现定位小蓝点功能则此权限必选-->
         <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />    
         <!--允许获取wifi网络信息，用于网络定位，若无gps但仍需实现定位小蓝点功能则此权限必选-->
         <uses-permission android:name="android.permission.ACCESS_WIFI_STATE" /> 
         <!--允许获取wifi状态改变，用于网络定位，若无gps但仍需实现定位小蓝点功能则此权限必选-->
         <uses-permission android:name="android.permission.CHANGE_WIFI_STATE" /> 
          <!--允许写入扩展存储，用于数据缓存，若无此权限则写到私有目录-->
         <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" /> 
         <!--允许写设备缓存，用于问题排查-->
          <uses-permission android:name="android.permission.WRITE_SETTINGS" />  
         <!--允许读设备等信息，用于问题排查-->
         <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" /> 

image.png

IOS：

        <key>NSPhotoLibraryAddUsageDescription</key>
        <string>需要您的同意，才能访问照片</string>
        <key>NSPhotoLibraryUsageDescription</key>
        <string>需要您的同意，才能访问相册</string>
        <key>NSCameraUsageDescription</key>
        <string>需要您的同意，才能访问相机</string>
        <key>NSMicrophoneUsageDescription</key>
        <string>需要您的同意，才能访问麦克风</string>
        <key>NSLocationUsageDescription</key>
        <string>需要您的同意，才能访问位置</string>
        <key>NSLocationWhenInUseUsageDescription</key>
        <string>需要您的同意，才能在使用期间访问位置</string>
        <key>NSLocationAlwaysUsageDescription</key>
        <string>需要您的同意，才能始终访问位置</string>
        <key>NSCalendarsUsageDescription</key>
        <string>需要您的同意，才能访问日历</string>
        <key>NSRemindersUsageDescription</key>
        <string>需要您的同意，才能访问提醒事项</string>
        <key>NSMotionUsageDescription</key>
        <string>需要您的同意，才能访问运动与健身</string>
        <key>NSHealthUpdateUsageDescription</key>
        <string>需要您的同意，才能访问健康更新 </string>
        <key>NSHealthShareUsageDescription</key>
        <string>需要您的同意，才能访问健康分享</string>
        <key>NSBluetoothPeripheralUsageDescription</key>
        <string>需要您的同意，才能访问蓝牙</string>
        <key>NSAppleMusicUsageDescription</key>
        <string>需要您的同意，才能访问媒体资料库</string>

image.png

至此权限配置完

3.接下来配置Android端的地图库引入与so支持

        ndk {
               //设置支持的SO库架构（开发者可以根据需要，选择一个或多个平台的so）
              abiFilters "armeabi", "armeabi-v7a", "arm64-v8a", "x86","x86_64"
       }

      dependencies {
       implementation "org.jetbrains.kotlin:kotlin-stdlib-jdk7:$kotlin_version"
      compile fileTree(dir: 'libs', include: ['*.jar'])
      //3D地图so及jar
       compile 'com.amap.api:3dmap:latest.integration'
      //定位功能
       compile 'com.amap.api:location:latest.integration'
      //搜索功能
       compile 'com.amap.api:search:latest.integration'
      }

至此Android端的地图库引入与so支持完成

4.创建个class AmapConfig 用于配置key与合规

     class AmapConfig {
      ///高德地图 key
      static const amapAndroidKey = '797a564sdsd8946458dsa9456';
       static const amapIosKey = '797a564afasdsd8946458dsasda9456';
       ///配置您申请的apikey，在此处配置之后，可以在初始化[AMapWidget]时，通过`apiKey`属性设置
       ///
       ///注意：使用[AMapWidget]的`apiKey`属性设置的key的优先级高于通过Native配置key的优先级，
       ///使用[AMapWidget]的`apiKey`属性配置后Native配置的key将失效，请根据实际情况选择使用
       static const AMapApiKey amapApiKeys =
             AMapApiKey(androidKey: amapAndroidKey, iosKey: amapIosKey);
       ///高德隐私合规声明，这里只是示例，实际使用中请按照实际参数设置>          >          [AMapPrivacyStatement]的'hasContains''hasShow''hasAgree'这三个参数
         ///
       /// 注意：[AMapPrivacyStatement]的'hasContains''hasShow''hasAgree'这三个参数中有一个为false，高德SDK均不会工作，会造成地图白屏等现象
         ///
        /// 高德开发者合规指南请参考：https://lbs.amap.com/agreement/compliance
         ///
       /// 高德SDK合规使用方案请参考：https://lbs.amap.com/news/sdkhgsy
         static const AMapPrivacyStatement amapPrivacyStatement =
            AMapPrivacyStatement(hasContains: true, hasShow: true, hasAgree: true);
       }

5.初始化并展示地图与定位小蓝点

       AMapWidget map = AMapWidget(
             onLocationChanged: (argument) {
               controller.onLocationChangeds(argument);
             },
             myLocationStyleOptions: MyLocationStyleOptions(true),
             privacyStatement: AmapConfig.amapPrivacyStatement,
             apiKey: AmapConfig.amapApiKeys,
             onMapCreated: controller.onMapCreated,
           );

6.地图中心跟随小蓝点移动只需在onLocationChanged回调中

           mapController?.moveCamera(
            CameraUpdate.newCameraPosition(CameraPosition(
            target: LatLng(lat.value, long.value), zoom: 14, bearing: 0)),
           animated: true);

至此高德地图的集成与简单实用完成！！！