【flutter】整合高德地图amap_base

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接： https://blog.csdn.net/ivy_doudou/article/details/100141628

可参考官方的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.git
      ref: develop
      path: 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" />
    <application
        android:name="io.flutter.app.FlutterApplication"
        android:label="flutter_01"
        android:icon="@mipmap/ic_launcher">
        <meta-data
            android: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 ;
  @override
  void initState() {
    _getLocation();
    super.initState();
  }
  @override
  Widget 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);*/
        },
      ),
    );
  }

  @override
  void 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 = [];

  @override
  void initState() {
    super.initState();
  }

  @override
  Widget 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()));
    }
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }
}