@dante1304/google-maps

ns plugin add @dante1304/nativescript-google-maps

使用方法

NativeScript 插件，用于 Google Maps SDK

这是一个跨平台（iOS & Android）的 Nativescript 插件，用于 Google Maps API。

先决条件

iOS - 必须安装 Cocoapods。

Android - 必须安装最新版本的 Google Play Services SDK。

Google Maps API 密钥 - 访问 Google 开发者控制台，创建一个项目，并启用 Google Maps Android API 和 Google Maps SDK for iOS API。然后，在凭据下创建一个 API 密钥。

为 Android 配置 API 密钥

首先，将必要的模板资源文件复制到 Android 应用资源文件夹中

cp -r node_modules/nativescript-google-maps-sdk/platforms/android/res/values app/App_Resources/Android/src/main/res

接下来，通过取消注释 nativescript_google_maps_api_key 字符串，并使用您之前创建的 API 密钥替换 PUT_API_KEY_HERE 来修改您的 app/App_Resources/Android/src/main/res/values/nativescript_google_maps_api.xml 文件。

最后，通过在 <application> 标签之间插入以下内容来修改您的 app/App_Resources/Android/src/main/AndroidManifest.xml 文件

<meta-data
    android:name="com.google.android.geo.API_KEY"
    android:value="@string/nativescript_google_maps_api_key" />

插件将默认使用 Android Google Play Services SDK 的最新可用版本。如果您需要更改版本，可以添加一个 project.ext 属性，如 googlePlayServicesVersion。

//   /app/App_Resources/Android/app.gradle

project.ext {
    googlePlayServicesVersion = "+"
}

为 iOS 配置 API 密钥

在您的 app.js 中，使用以下代码添加您的 API 密钥（将 PUT_API_KEY_HERE 替换为您之前创建的 API 密钥）

if (application.ios) {
    GMSServices.provideAPIKey("PUT_API_KEY_HERE");
}

如果您正在使用 Angular，请按以下方式修改您的 app.module.ts

import * as platform from "platform";
declare var GMSServices: any;

....

if (platform.isIOS) {
    GMSServices.provideAPIKey("PUT_API_KEY_HERE");
}

添加 MapView

通过在 <Page> 标签中添加 xmlns:maps="nativescript-google-maps-sdk" 命名空间来修改您的视图，然后使用 <maps:mapView /> 标签创建 MapView

<!-- /app/main-page.xml -->

<Page
    xmlns="http://www.nativescript.org/tns.xsd"
    xmlns:maps="nativescript-google-maps-sdk"
>
    <GridLayout>
        <maps:mapView
            latitude="{{ latitude }}"
            longitude="{{ longitude }}"
            zoom="{{ zoom }}"
            bearing="{{ bearing }}"
            tilt="{{ tilt }}"
            mapAnimationsEnabled="{{ mapAnimationsEnabled }}"
            padding="{{ padding }}"
            mapReady="onMapReady"
            markerSelect="onMarkerSelect"
            markerBeginDragging="onMarkerBeginDragging"
            markerEndDragging="onMarkerEndDragging"
            markerDrag="onMarkerDrag"
            cameraChanged="onCameraChanged"
            cameraMove="onCameraMove"
        />
    </GridLayout>
</Page>

属性

以下属性可用于调整相机视图

事件

以下事件可用

本地地图对象

MapView 的 gMap 属性提供了对平台本地地图对象的访问 —— 查阅相应的 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)

UI 设置

在 mapReady 事件触发后，您可以通过在 mapView.settings 上配置以下属性来调整地图的 UI 设置

样式

使用 gMap.setStyle(style); 设置地图的样式（《[Google Maps Style Reference](https://developers.google.com/maps/documentation/android-api/style-reference)》 | 《[Styling Wizard](https://mapstyle.withgoogle.com/)》）。

Angular

在 onMapReady 事件处理程序内部使用 this.mapView.setStyle(<MapStyle>JSON.parse(this.styles));。在这个例子中，this.mapView 是 MapView 对象，this.styles 是使用 Styling Wizard 创建的 JSON 文件的引用。从插件中导入 <MapStyle> 类型为 { MapStyle }。

基本示例

//  /app/main-page.js

var mapsModule = require("dante1304/nativescript-google-maps");

function onMapReady(args) {
    var mapView = args.object;

    console.log("Setting a marker...");
    var marker = new mapsModule.Marker();
    marker.position = mapsModule.Position.positionFromLatLng(-33.86, 151.20);
    marker.title = "Sydney";
    marker.snippet = "Australia";
    marker.userData = { index : 1};
    mapView.addMarker(marker);

    // Disabling zoom gestures
    mapView.settings.zoomGesturesEnabled = false;
}

function onMarkerSelect(args) {
    console.log("Clicked on " +args.marker.title);
}

function onCameraChanged(args) {
    console.log("Camera changed: " + JSON.stringify(args.camera));
}

function onCameraMove(args) {
    console.log("Camera moving: "+JSON.stringify(args.camera));
}

exports.onMapReady = onMapReady;
exports.onMarkerSelect = onMarkerSelect;
exports.onCameraChanged = onCameraChanged;
exports.onCameraMove = onCameraMove;

使用 Angular 的示例

// /app/map-example.component.ts

import {Component, ElementRef, ViewChild} from '@angular/core';
import {registerElement} from "nativescript-angular/element-registry";

// Important - must register MapView plugin in order to use in Angular templates
registerElement("MapView", () => require("nativescript-google-maps-sdk").MapView);

@Component({
    selector: 'map-example-component',
    template: `
    <GridLayout>
        <MapView (mapReady)="onMapReady($event)"></MapView>
    </GridLayout>
    `
})
export class MapExampleComponent {

    @ViewChild("MapView") mapView: ElementRef;

    //Map events
    onMapReady = (event) => {
        console.log("Map Ready");

}

标记聚类

设置标记聚类时使用 MapView 的 setupMarkerCluster 而不是像这样添加标记

function onMapReady(args) {
	var mapView = args.object;
	var markers = [];

	for (i = 0; i < 5; i++) {
		var marker = new mapsModule.Marker();
		marker.position = mapsModule.Position.positionFromLatLng(-33.86, 151.2);
		marker.title = `Marker ${i + 1}`;
		marker.snippet = `Marker ${i + 1}`;
		marker.userData = { index: i };
		markers.push(marker);
	}

	// The second argument is the minimum number of items that should form a cluster
	mapView.setupMarkerCluster(markers, 2);

	// Disabling zoom gestures
	mapView.settings.zoomGesturesEnabled = false;
}

许可证

Apache 许可证版本 2.0