Logo

腾讯地图地图组件 Flutter插件

demo apk下载地址

依赖

dependencies:
  flutter:
    sdk: flutter
  tmap_map_fluttify: ^x.x.x

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

配置

Android

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

<application>
    <meta-data
            android:name="TencentMapSDK"
            android:value="FQxxxxxxxxxxxxxxxxxxxxxxx2R"/>
</application>

iOS

使用地图需要使能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
);

显示基础地图

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

地图创建

创建过程分四步：

准备工程
创建地图视图
自定义地图配置

按照以下操作步骤，正常运行工程，展示基础地图的效果如图:
showMap android showMap ios

创建地图视图

关键代码：

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);

显示效果如下：
english android english ios

卫星地图

设置卫星地图代码如下：

await controller.setMapType(MapType.Satellite);

显示效果如下：
english android english ios

暗色地图

设置暗色地图代码如下：

await controller.setMapType(MapType.Night);

显示效果如下：
english android english ios

实时路况

腾讯地图SDK还提供了实时路况图层，可以为提供实时交通数据的城市展示实时交通状况。

await controller.showTraffic(true);

显示效果如下：
english android english ios

基础控件设置

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

logo

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

比例尺

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

await controller.showScaleControl(true);

指南针

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

await controller.showCompass(true);

绘制点标记

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

常用属性解释
添加一个默认的Marker
自定义Marker属性
Marker的事件操作
移除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)));

显示效果如下：
english android english ios

自定义Marker属性

开发者如果想自定义Marker的样式属性，可以通过两个阶段进行修改：

创建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',
  ),
);

创建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 提供了定位点控件，帮助开发者方便地实现地图上的定位点绘制需求。下面是一个定位点的效果图：
english android english ios

展示定位点

腾讯地图插件已集成定位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/.

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

腾讯地图 地图组件 Flutter插件

demo apk下载地址

依赖

配置

Android

iOS

导入

使用

初始化

显示基础地图

地图创建

创建地图视图

切换地图类型

普通地图

卫星地图

暗色地图

实时路况

基础控件设置

logo

比例尺

指南针

绘制点标记

常用属性解释

添加一个默认的Marker

自定义Marker属性

移除Marker

绘制线

添加线

移除折线

绘制面和形状

多边形

圆形

显示定位

展示定位点

修改定位点样式

社区 qq群 938842596

LICENSE

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

腾讯地图地图组件 Flutter插件