关于flutter插件地图的使用flutter_map

关于flutter插件地图的使用flutter_map

flutter_map

A Dart implementation of Leaflet for Flutter apps.
一个基于leaflet的地图插件，也就是说flutter_map基于的是瓦片地图，那么在兼容性上可以说比较好用了。

横向对比

目前主要的地图插件主要有： flutter_map map_view``amap

map_view

先说下map_view这个插件，这个插件主要是用来展示google map使用。 由于一个我们都知道的原因，我们在使用这个插件的过程中相对比较困难，所以我们可是适当放弃使用这plugin。

flutter_amap

每次看到版本为0.0.1的插件总觉得哪里有问题的，这是高德推出的插件。 高德地图3d flutter组件。

展示原生android、ios高德地图，并与flutter交互。

注意：随着flutter版本的提升， 本项目也会随之更新， 目前这个版本只能在单独的controller或者activity中打开高德地图。 划线部分表示说这个版本还不是很成熟，因此我也不想用

flutter_map

这个插件就是要重点说下的了 ，下面的视频可能需要代理才能光看，示例： 视频 

地址：https://pub.dartlang.org/packages/flutter_map
githubhttps://github.com/apptreesoftware/flutter_map 使用：

dependencies:
  flutter_map: ^0.3.0

在需要使用的地方根据自动提示添加packages

import \'packages:.....\';

需要注意的是可能需要添加LatLng这个包
使用：

Widget build(BuildContext context) {
    return new FlutterMap(
      options: new MapOptions(
        center: new LatLng(51.5, -0.09),//经纬度，注意前后顺序，用于展示中心
        zoom: 13.0,
      ),
       s: [
        new Tile Options(
          urlTemplate: \"https://api.tiles.mapbox.com/v4/\"
              \"{id}/{z}/{x}/{y}@2x.png?access_token={accessToken}\",//瓦片地图的URL
          additionalOptions: {
            \'accessToken\': \'<PUT_ACCESS_TOKEN_HERE>\',
            \'id\': \'mapbox.streets\',//其他附加内容
          },
        ),
        new Marker Options(
          markers: [
            new Marker(//! 地图标记
              width: 80.0,
              height: 80.0,
              point: new LatLng(51.5, -0.09),//经纬度注意顺序
              builder: (ctx) =>
              new Container(
                child: new FlutterLogo(),// 在标记的位置加上标记
              ),
            ),
          ],
        ),
      ],
    );
  }

关于瓦片地图的地址

根据需要将所需要的瓦片地图的地址填入上面的urlTemplate 一下内容摘选于github

TianDiTu: {
        Normal: {
            Map: \"http://t{s}.tianditu.cn/DataServer?T=vec_w&X={x}&Y={y}&L={z}\",
            Annotion: \"http://t{s}.tianditu.cn/DataServer?T=cva_w&X={x}&Y={y}&L={z}\"
        },
        Satellite: {
            Map: \"http://t{s}.tianditu.cn/DataServer?T=img_w&X={x}&Y={y}&L={z}\",
            Annotion: \"http://t{s}.tianditu.cn/DataServer?T=cia_w&X={x}&Y={y}&L={z}\"
        },
        Terrain: {
            Map: \"http://t{s}.tianditu.cn/DataServer?T=ter_w&X={x}&Y={y}&L={z}\",
            Annotion: \"http://t{s}.tianditu.cn/DataServer?T=cta_w&X={x}&Y={y}&L={z}\"
        },
        Subdomains: [\'0\', \'1\', \'2\', \'3\', \'4\', \'5\', \'6\', \'7\']
    },

    GaoDe: {
        Normal: {
            Map: \'http://webrd0{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}\'
        },
        Satellite: {
            Map: \'http://webst0{s}.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}\',
            Annotion: \'http://webst0{s}.is.autonavi.com/appmaptile?style=8&x={x}&y={y}&z={z}\'
        },
        Subdomains: [\"1\", \"2\", \"3\", \"4\"]
    },

    Google: {
        Normal: {
            Map: \"http://www.google.cn/maps/vt?lyrs=m@189&gl=cn&x={x}&y={y}&z={z}\"
        },
        Satellite: {
            Map: \"http://www.google.cn/maps/vt?lyrs=s@189&gl=cn&x={x}&y={y}&z={z}\"
        },
        Subdomains: []
    },

    Geoq: {
        Normal: {
            Map: \"http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineCommunity/MapServer/tile/{z}/{y}/{x}\",
            Color: \"http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetColor/MapServer/tile/{z}/{y}/{x}\",
            PurplishBlue: \"http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}\",
            Gray: \"http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetGray/MapServer/tile/{z}/{y}/{x}\",
            Warm: \"http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetWarm/MapServer/tile/{z}/{y}/{x}\",
            Cold: \"http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetCold/MapServer/tile/{z}/{y}/{x}\"
        },
        Subdomains: []

    }
    // 当然还有mapbox
    \"https://api.mapbox.com/v4/\"
      \"{id}/{z}/{x}/{y}@2x.png?access_token={accessToken}\"

使用mapbox： 1、创建mapbox账户获取apikey 2、打开leaflet_flutter_example/lib/main.dart粘贴key到：additionalOptionsmap中

使用离线地图

按照本指南获取离线地图块将地图导出后.mbtiles，可以使用mbtilesToPng解压缩/{z}/{x}/{y}.png。将其移动到Assets文件夹并将Asset目录添加到pubspec.yaml。离线地图的最低必填字段为：

new FlutterMap(
  options: new MapOptions(
    center: new LatLng(56.704173, 11.543808),
    minZoom: <offline map minimum zoom>,
    maxZoom: <offline map maximum zoom>,
    zoom: 13.0,
    swPanBoundary: LatLng(56.6877, 11.5089),
    nePanBoundary: LatLng(56.7378, 11.6644),
  ),
   s: [
    new Tile Options(
      offlineMode: true,
      maxZoom: <offline map maximum zoom>,
      urlTemplate: \"assets/offlineMap/{z}/{x}/{y}.png\",
    ),
  ],
),

Make sure PanBoundaries are within offline map boundary to stop missing asset errors.
See the flutter_map_example/ folder for a working example