首页 > 其他分享 >Flutter集成高德地图

Flutter集成高德地图

时间:2022-10-29 21:36:10浏览次数:68  
标签:集成 double signInfo 高德 flutter Flutter math sdk

Flutter集成高德地图,看官方文档写的不是很清楚,有些功能还没有移植到Flutter上,导致集成的时候遇到一些问题,把遇到的问题记录下来,方便之后查询

  1. 导入库:
    在flutter项目的pubspec.yaml中添加amap_flutter_map: ^3.0.0,执行flutter pub get安装对应的库;
    安卓项目的build.gradle中添加implementation 'com.amap.api:3dmap:latest.integration',同步gradle文件;
    iOS项目不用另外导入;

  2. 添加权限:
    安卓

    <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>
    
  3. 使用:按照官方文档中的方式,添加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("进入目标范围");
          }
        },
      )
    
  4. AMapWidget的onLocationChanged回调里可以获取到当前位置,不用再单独导入定位sdk;

  5. 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));
        }
      }
    
  6. 高德sdk退出崩溃,manifest里面的application标签加上android:allowNativeHeapPointerTagging="false"

  7. 现有的高德地图flutter插件功能还是不完善的,对比较复杂的功能可能还需要用原生来实现,希望之后sdk能增加多一些功能;

  8. 开发的时候遇到挺多问题的,通过搜索解决了,后面想记录的时候发现好多都忘记了,只能把最后正确的结果记录下来;之后开发的时候遇到问题,要尽快记录下来,有问题有解决方法才能更完善,也会帮助更多的人;

参考链接:
高德地图官方文档
绘制圆形区域
高德sdk退出崩溃问题解决方法链接
flutter高德地图sdk接入

标签:集成,double,signInfo,高德,flutter,Flutter,math,sdk
From: https://www.cnblogs.com/shenyuiOS/p/16839921.html

相关文章

  • Git 02: git管理码云代码仓库 + IDEA集成使用git
    Git项目搭建创建工作目录与常用指令工作目录(WorkSpace)一般就是你希望Git帮助你管理的文件夹,可以是你项目的目录,也可以是一个空目录,建议不要有中文。日常使用只要记住......
  • 根据用户的请求ip地址获取天气(对接高德地图api)
    1、获取请求的ip地址(高德地图api)packagecom.yami.shop.common.util;importlombok.extern.slf4j.Slf4j;importjavax.servlet.http.HttpServletRequest;importj......
  • 5 个 Flutter VSCode 技巧和窍门,你可以马上使用!
    5个FlutterVSCode技巧和窍门,你可以马上使用!前言今天,我将向你展示5个非常有用的Flutter技巧,你可以立即应用到你的项目中。我不会给你任何软件包或扩展,但非常简单......
  • 8 个最有用的 Flutter 技巧!
    8个最有用的Flutter技巧!前言这些在开发中的代码技巧猫哥也在使用哦。原文https://medium.com/@flutterqueen/top-8-flutter-useful-tips-fbaf7d54f5a1正文1文......
  • Flutter开发之Scaffold组件快速开发APP
    Scaffold包括的属性constScaffold({Key?key,PreferredSizeWidget?appBar,Widget?body,Widget?floatingActionButton,FloatingActionButtonLocation?floatingAct......
  • 【Serverless】快速集成云函数HarmonyOS
    ​1、学习目标什么是AppGalleryConnect云函数云函数是一项Serverless计算服务,提供FaaS(FunctionasaService)能力,可以帮助开发者大幅简化应用开发与运维相关事务,降低应......
  • Jenkins集成clover做覆盖率报告
    1.Jenkins安装插件CloverPlugin2.修改配置文件<1>.修改pom.xmldependency部分<dependency><groupId>junit</groupId><artifactId>junit</artifactId>......
  • Flutter 路由
    flutter的路由简单使用跳转Navigator.of(context).push(MaterialPageRoute(builder:(context){returnTest();......
  • 三. jenkins+newman+postman持续集成环境搭建
    Newman简介    Newman是一款基于Node.js开发的,可以运用postman工具直接从命令运行和测试postman集合Newman应用环境准备:js/cnpm或npm配置好环境,执行如下命令......
  • SpringBoot集成Swagger2
    1.新建一个SpringBoot=web项目2.导入相关依赖`io.springfoxspringfox-swagger23.0.0io.springfoxspringfox-swagger-ui3.0.0`3.编写一个Hello工程4.配置Swa......