Fluttify一周一插件 之 腾讯地图 Flutter插件

腾讯地图 地图组件 Flutter插件

demo apk下载地址

依赖

dependencies:
  flutter:
    sdk: flutter
  tmap_map_fluttify: ^x.x.x
复制代码

GitHub地址 github.com/fluttify-pr… ；更多详细信息与插件支持请关注fluttify-project .

配置

Android

1. 在AndroidManifest.xml的application标签下配置app key:

<application>
    <meta-data android:name="TencentMapSDK" android:value="FQxxxxxxxxxxxxxxxxxxxxxxx2R"/>
</application>
复制代码

iOS

1. 使用地图须要使能UiKitView, 在Info.plist中添加:

<key>io.flutter.embedded_views_preview</key>
<string>YES</string>
复制代码

导入

import 'package:tmap_map_fluttify/tmap_map_fluttify.dart';
复制代码

使用

初始化

await TmapService.instance.init(
  iosKey: 'FQ##############################2R',
  androidKey: null, // Android端须要在AndroidManifest.xml中配置，这里能够传null
);
复制代码

显示基础地图

显示基础地图提供建立、获取、销毁相关能力的介绍，适合初级开发者使用。

地图建立

建立过程分四步：

1. 准备工程
2. 建立地图视图
3. 自定义地图配置

按照如下操做步骤，正常运行工程，展现基础地图的效果如图:

建立地图视图

关键代码：

import 'package:flutter/material.dart';
import 'package:tmap_map_fluttify/tmap_map_fluttify.dart';

class CreateMapScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('自定义地图')),
      body: TmapView(
        onMapCreated: (TmapController controller) async {
          // 后续与地图有关的全部操做都在controller上调用;
        },
      ),
    );
  }
}
复制代码

切换地图类型

地图插件提供了几种预置的地图图层：包括普通地图、卫星地图 和暗色地图。
MapType 类提供图层类型枚举，详细以下：

类	值	说明
MapType	MapType.Standard	普通地图（默认地图类型）
MapType	MapType.Satellite	卫星地图
MapType	MapType.Night	暗色地图

普通地图

普通地图的信息包括精细的面区域信息，道路信息、建筑物及重要的POI（兴趣点–地图上的图标及文字）
设置显示普通地图的示例代码以下：

await controller.setMapType(MapType.Standard);
复制代码

显示效果以下：

卫星地图

设置卫星地图代码以下：

await controller.setMapType(MapType.Satellite);
复制代码

显示效果以下：

暗色地图

设置暗色地图代码以下：

await controller.setMapType(MapType.Night);
复制代码

显示效果以下：

实时路况

腾讯地图SDK还提供了实时路况图层，能够为提供实时交通数据的城市展现实时交通情况。

await controller.showTraffic(true);
复制代码

显示效果以下：

基础控件设置

地图控件包含 Logo、比例尺、指南针等。

logo

在您的应用中使用腾讯地图 SDK 时，按照腾讯地图开放API服务协议要求始终保持logo 是可见的，不容许对腾讯地图的 logo 进行遮盖、修改等弱化地图品牌的行为。

比例尺

比例尺是表示图上一条线段的长度与地面相应线段的实际长度之比，是地图使用过程当中帮助用户了解实际距离不可缺乏的工具。
在地图 SDK 中，比例尺只有在地图缩放时才会淡入展现，当地图中止缩放会淡出消失，因此虽然比例尺是默认打开的，但在地图静止时用户可能看不到比例尺。
与 logo 不一样，比例尺控件容许关闭。地图控件相关的控制在 TmapController 类中提供。

await controller.showScaleControl(true);
复制代码

指南针

能够指示地图的南北方向，默认是关闭的状态，而且该控件的默认点击事件会将地图视图的俯仰角和偏航角动画到0的位置。

await controller.showCompass(true);
复制代码

绘制点标记

点标记，是在地图上用来标记一个经纬度坐标的覆盖物，包括点图标和浮在点之上的信息窗（常称之为InfoWindow）。腾讯地图SDK为点标记提供了丰富的样式和场景使用，此篇着重介绍点标记图标相关内容，信息窗单独在另外一篇文章中介绍，那么接下来咱们将分五部分来详细介绍点标记：

1. 经常使用属性解释
2. 添加一个默认的Marker
3. 自定义Marker属性
4. Marker的事件操做
5. 移除Marker

经常使用属性解释

MarkerOptions对象:

属性	说明
position	指定经纬度坐标，必填参数
iconProvider	设置点图标样式，默认为系统图标，使用ImageProvider建立自定义的icon
anchorU,anchorV	设置锚点，默认为(0.5,0.5)为图标中心，该属性影响Marker的位置、旋转、变形动画等操做
visible	设置可见性，默承认见
draggable	设置是否支持拖拽，默认false
infoWindowEnable	设置是否开启InfoWindow，默认true为开启
title	设置默认InfoWindow的标题
snippet	设置默认InfoWindow的描述
object	设置自定义数据

Marker对象:

接口	说明
Marker::position	获取marker经纬度
Marker::title	获取Marker标题
Marker::snippet	获取Marker描述
Marker::object	设置自定义数据
Marker::remove()	删除marker
Marker::setCoordinate(:LatLng)	设置坐标
Marker::setVisible(:bool)	设置可见性
Marker::showInfoWindow()	显示弹窗
Marker::hideInfoWindow()	关闭弹窗
Marker::setIcon(:ImageProvider:ImageConfiguration)	设置图标

添加一个默认的Marker

腾讯地图SDK提供不少默认的Marker样式，经过TmapController添加Marker接口，便可添一个默认样式的Marker:

await controller.addMarker(MarkerOption(coordinate: LatLng(40.011313, 116.391907)));
复制代码

显示效果以下：

自定义Marker属性

开发者若是想自定义Marker的样式属性，能够经过两个阶段进行修改：

1. 建立Marker对象以前，能够经过修改MarkerOption选项来初始化Marker;

await controller.addMarker(
  MarkerOption(
    position: LatLng(40.011313, 116.391907),
    iconProvider: AssetImage('images/test_icon.png'),
    visible: true,
    title: 'title',
    snippet: 'snippet',
  ),
);
复制代码

2. 建立Marker对象以后，能够经过Marker对象，来修改属性;

final marker = await controller.addMarker(MarkerOption(coordinate: LatLng(40.011313, 116.391907)));
// 建立Marker对象以后，修改属性
await marker.setCoordinate(LatLng(41, 117));
复制代码

移除Marker

final marker = await controller.addMarker(MarkerOption(coordinate: LatLng(40.011313, 116.391907)));
// 从地图中移除Marker
await marker.remove();
复制代码

绘制线

线是由一组经纬度点按照必定的顺序链接而成，在地图上绘制线由 Polyline 类定义实现。一般用来表示一段路、轨迹等线型场景。

添加线

添加折线的同时能够设置线的颜色、宽度等属性，示例代码以下：

await controller.addPolyline(PolylineOption(
  // 经纬度列表
  coordinateList: [
    LatLng(39.984864, 116.305756),
    LatLng(39.983618, 116.305848),
    LatLng(39.982347, 116.305966),
    LatLng(39.982412, 116.308111),
    LatLng(39.984122, 116.308224),
    LatLng(39.984955, 116.308099),
  ],
  // 折线宽度
  width: 10,
  // 折线颜色
  strokeColor: Colors.green,
));
复制代码

移除折线

从地图移除折线

final polyline = await controller.addPolyline(PolylineOption(
  // 经纬度列表
  coordinateList: [
    LatLng(39.984864, 116.305756),
    LatLng(39.983618, 116.305848),
    LatLng(39.982347, 116.305966),
    LatLng(39.982412, 116.308111),
    LatLng(39.984122, 116.308224),
    LatLng(39.984955, 116.308099),
  ],
));
await polyline.remove();
复制代码

绘制面和形状

地图上的面一组在地图上的封闭线段组成的图形，包括圆形和多边形，用户能够为它设置描边和填充颜色。

多边形

多边形是由 Polygon 类定义的一组在地图上的封闭线段组成的图形，它由一组 LatLng 点按顺序链接而成。添加折线使用 TmapController.addPolygon(PolygonOption option) 接口返回 Polygon 实例，Polygon 是在地图上画多边形的类，能够移除remove()多边形、设置多边形顶点、描边的宽度和颜色、多边形的填充色、层级关系、可见性、可点击性，也能够经过setOptions(PolygonOption opt)设置一组属性。

下面的代码展现了添加多边形、设置多边形属性、移除多边形的方法：

// 添加多边形
final polygon = await controller.addPolygon(PolygonOption(
  coordinateList: [
    LatLng(39.984864, 116.305756),
    LatLng(39.983618, 116.305848),
    LatLng(39.982347, 116.305966),
    LatLng(39.982412, 116.308111),
    LatLng(39.984122, 116.308224),
    LatLng(39.984955, 116.308099),
  ],
  width: 10,
  strokeColor: Colors.green,
));
// 移除多边形
await polygon.remove();
复制代码

圆形

圆形是由 Circle 类定义的封闭曲线，在腾讯地图构造一个圆形须要肯定它的圆心和半径。

圆的实例化须要一个 CircleOption 对象，该对象是建立圆的参数类，能够设置圆心坐标、半径、描边的宽度和颜色、圆的填充颜色、层级、可见性、可点击性等属性。 添加圆返回的是一个 Circle 对象，该队形是在地图上画圆的类，能够经过它修改圆的属性。 添加圆、修改属性、移除圆的具体示例代码以下：

// 添加圆
final circle = await controller.addCircle(CircleOption(
  center: LatLng(39.984864, 116.305756),
  radius: 10,
  width: 10,
  strokeColor: Colors.green,
));
// 移除圆
await circle.remove();
复制代码

显示定位

地图 SDK 提供了定位点控件，帮助开发者方便地实现地图上的定位点绘制需求。下面是一个定位点的效果图：

展现定位点

腾讯地图插件已集成定位SDK，内部直接使用腾讯定位SDK做为定位源，使用时，只须要调用TmapController.showMyLocation(:MyLocationStyle)便可。

await controller.showMyLocation(MyLocationOption());
复制代码

修改定位点样式

MyLocationOption提供了对定位点样式的配置项，包括:

名称	类型	备注
show	bool	是否显示定位
myLocationType	MyLocationType	定位类型
iconProvider	ImageProvider	自定义图标
strokeColor	Color	精度圈边框颜色
strokeWidth	double	精度圈边框宽度
fillColor	Color	精度圈填充颜色

后续更新及更多详细信息与插件支持请关注fluttify-project .

社区 qq群 938842596

LICENSE

Copyright (C) 2020 yohom

This program is free software: you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.

This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details.

You should have received a copy of the GNU General Public License along with this program. If not, see www.gnu.org/licenses/.