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/.