flutter 地图最简单的实现方案

使用插件：amap_map_fluttify

• 该插件是在我使用了flutter_map；amap_base等相关插件后权衡确认的；flutter_map使用量不大，作者较长时间不维护；amap_base使用量大，集成中遇到的bug解决办法有点坑爹，需要去改插件源码，改了能解决问题，但是不方便上传代码，用jenkins等打包工具；

demo:图片，（具体代码见文章最后）

使用方式：（注意android，ios对应的key是不同的，因为它们2个平台的包名也是不一样的）

高德地图配置（文档还是比较容易的）：
高德地图配置地址

1 . 获取SHA1:
Android Studio中打开Terminal，输入：keytool -v -list -keystore key存放的地址
2：申请Key:高德平台上申请：
3：Android 配置：AndroidManifes.xml 设置key

4：IOS设置key:

void main() async {
  AmapService.init('8f3be11ca5cb8df0cd950df596c0dbc2');
  runApp(MyApp());
}

5：IOS地图权限设置：
在项目的 Info.plist 添加定位权限申请，根据您的业务需求，选择下列方式设置。
NSLocationWhenInUseUsageDescription 表示应用在前台的时候可以搜到更新的位置信息。
NSLocationAlwaysUsageDescription 申请Always权限，以便应用在前台和后台（suspend 或 terminated）都可以获取到更新的位置数据。

• 在xcode中进行设置：

• 可以在对应的文件中设置或者查看：
  

项目使用到的插件

  #高德地图
  amap_map_fluttify: ^0.3.3+10e2842
  #权限
  permission_handler: ^3.0.0
  #绘制地图时用
  decorated_flutter: ^0.6.1

具体的使用代码：
main.dart

import 'package:amap_map_fluttify/amap_map_fluttify.dart';
import 'package:flutter/material.dart';
import 'package:oktoast/oktoast.dart';
import 'my_map/map_screen.dart';

void main() async {
  AmapService.init('8f3be11ca5cb8df0cd950df596c0dbc2');

  runApp(MyApp());
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State {
  @override
  Widget build(BuildContext context) {
    return OKToast(
      child: MaterialApp(
        home: Scaffold(
          backgroundColor: Colors.grey.shade200,
          body: MyScreen(),
        ),
      ),
    );
  }
}

import 'dart:math';
import 'package:amap_map_fluttify/amap_map_fluttify.dart';
import 'package:decorated_flutter/decorated_flutter.dart';
import 'package:flutter/material.dart';
import 'package:flutter_attendance/fluttify_map/utils/misc.dart';

final _assetsIcon = Uri.parse('assets/images/test_icon.png');

class MyScreen extends StatefulWidget {
  @override
  _MyScreenState createState() => _MyScreenState();
}

class _MyScreenState extends State {
  AmapController _controller;
  List _markers = [];
  List _latLngList = [];
  int city = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('绘制点标记')),
      body: Column(
        children: [
          Flexible(
            flex: 1,
            child: AmapView(
              onMapCreated: (controller) async {
                _controller = controller;
                if (await requestPermission()) {
                  ///true定位，false默认北京
                  await controller.showMyLocation(true);

                  ///设置地图缩放大学
                  await controller.setZoomLevel(6);
                }
              },
            ),
          ),

          ///获取当前经纬度
          ListTile(
            title: Center(child: Text('获取当前位置经纬度')),
            onTap: () async {
              final latLng = await _controller?.getLocation();
              toast('当前经纬度: ${latLng.toString()}');
            },
          ),

          ///定位显示图标
          ListTile(
            title: Center(child: Text('添加Marker')),
            onTap: _showLatLng,
          ),

          ///连线
          ListTile(
            title: Center(child: Text('添加线')),
            onTap: () async {
              await _controller?.addPolyline(
                _latLngList,
                width: 10,
                strokeColor: Colors.green,
              );
            },
          ),
          ListTile(
            title: Center(child: Text('删除Marker')),
            onTap: () async {
              if (_markers.isNotEmpty) {
                await _markers[0].remove();
                _markers.removeAt(0);
              }
            },
          ),
          ListTile(
            title: Center(child: Text('清除所有Marker')),
            onTap: () async {
              await _controller.clearMarkers();
            },
          ),
        ],
      ),
    );
  }

  ///展示定位点
  _showLatLng() async {
    final random = Random();
    _controller.getLocation().then((_) {
      //获取随机定位点
      LatLng latLng = LatLng(
        _.latitude + random.nextDouble(),
        _.longitude + random.nextDouble(),
      );

      ///TODO 获取自动定位点
//      LatLng latLng = _;
      _latLngList.add(latLng);
      print('---获取的定位点------ ${_.toString()}');
      _getLatLng(latLng);
    });
  }


  ///地图标记点
  _getLatLng(LatLng latLng) async {
    city = city + 1;
    final marker = await _controller?.addMarker(
      context,
      MarkerOption(
        latLng: latLng,
        title: '北京 $city',
        snippet: '描述',
        iconUri: _assetsIcon,
        draggable: true,
      ),
    );
    _markers.add(marker);
  }
}

创造不易，感谢支持，更多消息请关注公众号：浅滩里的鱼