@nativescript/google-maps

一个插件，允许您使用 Maps SDK 来访问 Google Maps 功能。

内容

• 先决条件

• 安装

• 使用 @nativescript/google-maps 与 Core

  • 使用 @nativescript/google-maps 与 Angular
  • 使用 @nativescript/google-maps 与 Vue
  • 控制相机
  • 设置地图类型
  • 美化地图

• API

  • MapView 类

    • 事件
    • 属性

  • GoogleMap 对象

    • 属性
    • 方法

  • 相机位置

  • 投影

  • UISettings

  • MapType 枚举

  • 标记

    • 添加标记
    • 标记对象
    • 标记选项
    • 移除标记

  • 圆形

    • 添加圆形
    • 圆形选项
    • 移除圆形

  • 多边形

    • 添加多边形
    • 多边形选项
    • 移除多边形

  • 多段线

    • 添加多段线
    • 多段线选项
    • 移除多段线

  • 地面覆盖

    • 添加地面覆盖
    • 地面覆盖选项
    • 移除地面覆盖

  • 瓦片覆盖

    • 添加瓦片覆盖
    • 瓦片覆盖选项
    • 移除瓦片覆盖
    • 瓦片提供者

先决条件

1. 要使用 Google Maps API，请在 Google API 控制台 中注册您的应用程序并获取 API 密钥。

2. 将 Google Maps API 密钥添加到您的应用程序中。

Android

要为 Android 添加 API 密钥，修改 AndroidManifest.xml 文件并添加一个 <meta-data> 标签，其名称为 com.google.android.geo.API_KEY，值为密钥。

<application
  android:name="com.tns.NativeScriptApplication"
  android:allowBackup="true"
  android:icon="@mipmap/ic_launcher"
  android:label="@string/app_name"
  android:theme="@style/AppTheme"
  android:hardwareAccelerated="true">

  <meta-data
    android:name="com.google.android.geo.API_KEY"
    android:value="yourKey"/>
</application>

iOS

要为 iOS 添加 API 密钥，将 TNSGoogleMapsAPIKey 键和 API 密钥作为值添加到位于 App_Resources/iOS 的 Info.plist 文件中。

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
  <dict>
    <key>TNSGoogleMapsAPIKey</key>
    <string>yourKey</string>
  </dict>
</plist>

安装

npm install @nativescript/google-maps

要使用插件的不同 NativeScript 味道，修改 main.ts 以导入并注册它。

使用 @nativescript/google-maps 与 core

1. 通过提供前缀（例如 map）使用 Page 的 xmlns 属性注册插件命名空间。

<Page xmlns="http://schemas.nativescript.org/tns.xsd"
  xmlns:map="@nativescript/google-maps">

2. 使用 map 前缀访问 <MapView>。

<map:MapView ...

以下是前两个步骤的完整代码

<Page xmlns="http://schemas.nativescript.org/tns.xsd"
  xmlns:map="@nativescript/google-maps">
	<map:MapView
		lat="{{lat}}"
		lng="{{lng}}"
		zoom="{{zoom}}"
		bearing="{{bearing}}"
		tilt="{{tilt}}"
		mapTap="{{onTap}}"
		mapLongPress="{{onLongPress}}"
		markerTap="{{onMarkerTap}}"
	/>
</Page>

3. 要管理映射功能，监听地图视图的 ready 事件并从事件数据中获取对 GoogleMap 实例的引用。

<Page xmlns="http://schemas.nativescript.org/tns.xsd"
  xmlns:map="@nativescript/google-maps">
	<map:MapView
		lat="{{lat}}"
		lng="{{lng}}"
		zoom="{{zoom}}"
		bearing="{{bearing}}"
		tilt="{{tilt}}"

		ready="{{onReady}}" 👈

		mapTap="{{onTap}}"
		mapLongPress="{{onLongPress}}"
		markerTap="{{onMarkerTap}}"
	/>
</Page>

要使用不同 NativeScript 味道的插件，修改 main.ts 以注册它。

使用 @nativescript/google-maps 与 Angular

1. 在 app.module.ts 中，通过将 GoogleMapsModule 添加到 AppModule 的 imports 数组中注册插件。

import { GoogleMapsModule } from '@nativescript/google-maps/angular';

// Registering
@NgModule({
    imports: [
      GoogleMapsModule
    ],
    declarations: [
      AppComponent
    ],
    bootstrap: [AppComponent]
})

2. 将 MapView 添加到您的标记中。

<MapView
	(mapTap)="onTap($event)"
	(mapLongPress)="onLongPress($event)"
	(markerTap)="onMarkerTap($event)"
>
</MapView>

3. 管理

<MapView
	(ready)="onReady($event)" 
	(mapTap)="onTap($event)"
	(mapLongPress)="onLongPress($event)"
	(markerTap)="onMarkerTap($event)"
>
</MapView>

3. 要管理映射功能，监听地图视图的 ready 事件并从事件数据中获取对 GoogleMap 实例的引用。

使用 @nativescript/google-maps 与 Vue

1. 在 app.ts 文件中，通过将插件的引用传递给 app 实例的 use() 方法注册插件。

Vue

import { createApp,registerElement } from 'nativescript-vue';
import GoogleMaps from '@nativescript/google-maps/vue'

import Home from './components/Home.vue';

const app = createApp(Home)
app.use(GoogleMaps)

注意 要处理地图功能，请参阅 GoogleMap 对象 API。

2. 将 MapView 组件添加到标记中。

<MapView
	@ready="onReady"
	@mapTap="onTap"
	@mapLongPress="onLongPress"
	@markerTap="onMarkerTap"

/>

注意 要处理地图功能，请参阅 GoogleMap 对象 API。

3. 要管理映射功能，监听地图视图的 ready 事件并从事件数据中获取对 GoogleMap 实例的引用。

控制相机

要程序化更新相机位置，请在 GoogleMap 对象上调用 animateCamera() 方法，并传入一个 CameraUpdate 实例。

import { CameraUpdate } from '@nativescript/google-maps';

googleMap.animateCamera(
	CameraUpdate.fromCoordinate({
			lat: -32.1234,
			lng: 125.1234
		},
		googleMap.cameraPosition.zoom
	)
);

设置地图类型

要设置地图类型，将 mapType 属性设置为 MapType 选项之一。

import { GoogleMap, MapType } from '@nativescript/google-maps';

map: GoogleMap;
map.mapType = MapType.Hybrid;

有关可以调用并传递给 animateCamera() 方法的更多方法，请参阅 CameraUpdate。

地图样式

您可以对地图的项目进行样式设置，例如道路、公园、商业和其它兴趣点。

样式仅在 普通 地图类型上有效。样式不影响室内地图。

要样式化您的地图，请使用由 Google Maps APIs Styling Wizard 生成的 JSON 文件。除了更改功能的外观外，您还可以完全隐藏功能。

[
  {
    "featureType": "all",
    "stylers": [
      { "color": "#C0C0C0" }
    ]
  },{
    "featureType": "road.arterial",
    "elementType": "geometry",
    "stylers": [
      { "color": "#CCFFFF" }
    ]
  },{
    "featureType": "landscape",
    "elementType": "labels",
    "stylers": [
      { "visibility": "off" }
    ]
  }
]

要应用自定义样式到您的地图，您可以在您的 GoogleMap 对象上设置 mapStyle 属性。

import { GoogleMap } from '@nativescript/google-maps';

map: GoogleMap;
map.mapStyle = [{
	"featureType": "landscape",
	"elementType": "labels",
	"stylers": [
		{ "visibility": "off" }
	]
}];

API

MapView 类

属性

以下属性可用于在初始化时调整相机视图

事件

MapView 提供以下事件

GoogleMap 对象

此类提供映射功能，其实例可通过 MapView 实例的 ready 事件 获取。

function onReady(event: MapReadyEvent) {
	const map: GoogleMap = event.map;
}

属性

方法

本地地图对象

GoogleMap让您访问平台的本地地图对象 native | android | ios

有关如何使用它的信息，请参阅适当的SDK参考：[iOS](https://developers.google.com/maps/documentation/ios-sdk/reference/interface_g_m_s_map_view) | [Android](https://developers.google.com/android/reference/com/google/android/gms/maps/GoogleMap)

相机位置

可以从GoogleMap对象的cameraPosition属性中读取地图的当前相机位置。

CameraUpdate 类

CameraUpdate 提供了多种方法来创建目标 CameraPosition。

投影

投影用于在屏幕位置和地球表面的地理坐标之间进行转换。

UISettings 接口

您可以通过配置 uiSettings 属性的以下属性来从 GoogleMap 对象调整地图的 UI 设置：

MapType 枚举

Google Maps API 提供以下五种类型的地图

标记

添加标记

您可以使用 GoogleMap 对象的 addMarker 方法创建标记，通过传递一个 MarkerOptions 对象。

function addMarker(map: GoogleMap, markerOptions: MarkerOptions): Marker {
	return map.addMarker(markerOptions);
}

addMarker 返回一个 Marker

标记对象

它实现了 [MarkerOptions] 接口，并具有以下附加方法。

标记选项

坐标

移除标记

要从地图中删除标记，请在 GoogleMap 实例上调用 removeMarker() 方法，并传递要删除的标记。

function removeMarker(map: GoogleMap, marker: Marker) {
	map.removeMarker(marker);
}

圆形

添加圆形

要向地图中添加圆圈，请调用 addCircle() 方法，并使用 CircleOptions 对象指定其属性。

function addCircle(map: GoogleMap, circleOptions: CircleOptions): Circle {
	return map.addCircle(circleOptions);
}

圆形选项

移除圆形

您可以使用GoogleMap的removeCircle()方法删除圆。

function removeCircle(map: GoogleMap, circle: Circle) {
	map.removeCircle(circle);
}

多边形

添加多边形

您可以使用GoogleMap的addPolygon()方法创建多边形，方法是通过传递指定的PolygonOptions。

function addPolygon(map: GoogleMap, polygonOptions: PolygonOptions): Polygon {
	return map.addPolygon(polygonOptions);
}

多边形选项

移除多边形

您可以使用GoogleMap的removePolygon函数删除多边形，如下所示

function removePolygon(map: GoogleMap, polygon: Polygon) {
	map.removePolygon(polygon);
}

多段线

添加多段线

您可以通过传递一个PolylineOptions对象来使用GoogleMap的对象addPolyline函数创建折线。

function addPolyline(map: GoogleMap, polylineOptions: PolylineOptions): Polyline {
	return map.addPolyline(polylineOptions);
}

多段线选项

移除多段线

您可以使用GoogleMap的removePolyline函数删除折线，如下所示

function removePolyline(map: GoogleMap, polyline: Polyline) {
	map.removePolyline(polyline);
}

地面覆盖

添加地面覆盖

您可以通过传递指定的GroundOverlay Options来使用GoogleMap的对象addGroundOverlay函数创建地面覆盖。

function addGroundOverlay(map: GoogleMap, groundOverlayOptions: GroundOverlayOptions): GroundOverlay {
	return map.addGroundOverlay(groundOverlayOptions);
}

地面覆盖选项

移除地面覆盖

您可以使用GoogleMap的removeGroundOverlay函数删除地面覆盖，如下所示

function removeGroundOverlay(map: GoogleMap, groundOverlay: GroundOverlay) {
	map.removeGroundOverlay(groundOverlay);
}

瓦片覆盖

添加瓦片覆盖

您可以通过传递指定的TileOverlay Options来使用GoogleMap的对象addTileOverlay函数创建瓦片覆盖。

function addTileOverlay(map: GoogleMap, tileOverlayOptions: TileOverlayOptions): TileOverlay {
	return map.addTileOverlay(tileOverlayOptions);
}

瓦片覆盖选项

在将瓦片覆盖添加到地图之后设置瓦片覆盖选项可能对瓦片覆盖没有影响。要更新瓦片覆盖，可能需要调用clearTileCache()。

移除瓦片覆盖

您可以使用GoogleMap的removeTileOverlay函数删除瓦片覆盖，如下所示

function removeTileOverlay(map: GoogleMap, tileOverlay: TileOverlay) {
	map.removeTileOverlay(tileOverlay);
}

瓦片提供者

瓦片提供者是提供用于瓦片覆盖的瓦片的对象。

例如，可以创建一个UrlTileProvider，如下所示

const tileProvider = new UrlTileProvider((x, y, z) => {
	return `https://tiles.example.com/${z}/${x}/${y}.png`;
});

许可证

Apache License Version 2.0