NativeScript 插件用于 Google Maps SDK

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

先决条件

NativeScript - 强烈推荐使用最新的 nativescript-cli@7。

iOS - 必须安装 Cocoapods。

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

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

安装

使用 NativeScript CLI 工具安装插件

ns plugin add nativescript-google-maps-sdk

或者在 nativescript < 7 的情况下，使用旧命令

tns plugin add nativescript-google-maps-sdk

设置

请参阅包含的演示代码 此处

请参阅实时演示 此处

为 Android 配置 API 密钥

Nativescript 4+

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

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

然后，修改你的 app/App_Resources/Android/src/main/res/values/google_maps_api_key.xml 文件，取消注释 nativescript_google_maps_api_key 字符串，并将 PUT_API_KEY_HERE 替换为你之前创建的 API 密钥。

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

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

插件将默认为最新可用的 Google Play Services SDK 版本。如果你需要更改版本，可以添加一个 project.ext 属性，例如 googlePlayServicesVersion，如下所示

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

project.ext {
    googlePlayServicesVersion = "+"
}

Nativescript < 4

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

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

然后，修改你的 app/App_Resources/Android/values/google_maps_api_key.xml 文件，取消注释 nativescript_google_maps_api_key 字符串，并将 PUT_API_KEY_HERE 替换为你之前创建的 API 密钥。

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

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

为 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 | Android

UI 设置

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

样式

使用 gMap.setStyle(style); 设置地图的样式（Google Maps 样式参考 | 样式向导）。

Angular

在 onMapReady 事件处理程序内部使用 this.mapView.setStyle(<Style>JSON.parse(this.styles));。在此示例中，this.mapView 是 MapView 对象，this.styles 是使用 样式向导 创建的 JSON 文件的引用。从插件导入的 <Style> 类型为 { Style }。

基本示例

//  /app/main-page.js

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

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;

自定义信息窗口（测试版）

要使用自定义标记信息窗口，在视图中定义一个模板，如下所示

<!-- /app/main-page.xml -->
<Page 
    xmlns="http://www.nativescript.org/tns.xsd"
    xmlns:maps="nativescript-google-maps-sdk"
>
  <GridLayout>
       <maps:mapView mapReady="onMapReady">
            <!-- Default Info Window Template -->       		
            <maps:mapView.infoWindowTemplate>
                <StackLayout orientation="vertical" width="200" height="150" >
                    <Label text="{{title}}" className="title" width="125"   />
                    <Label text="{{snippet}}" className="snippet" width="125"   />
                    <Label text="{{'LAT: ' + position.latitude}}" className="infoWindowCoordinates"  />
                    <Label text="{{'LON: ' + position.longitude}}" className="infoWindowCoordinates"  />
                </StackLayout>
            </maps:mapView.infoWindowTemplate>
            <!-- Keyed Info Window Templates -->   
            <maps:mapView.infoWindowTemplates>
                <template key="testWindow">
                    <StackLayout orientation="vertical" width="160" height="160" >
                        <Image src="res://icon" stretch="fill"  height="100" width="100" className="infoWindowImage" />
                        <Label text="Let's Begin!" className="title" />
                    </StackLayout>
                </template>
            </maps:mapView.infoWindowTemplates>
        </maps:mapView>
  </GridLayout>
</Page>

...并设置 infoWindowTemplate 属性如下

var marker = new mapsModule.Marker();
marker.infoWindowTemplate = 'testWindow';

这将配置标记使用具有给定键的信息窗口模板。如果找不到具有该键的模板，则将使用默认的信息窗口模板。

** 已知问题：在iOS信息窗口中远程图片无法显示（本地图片可以正常显示）

与Angular的使用

请参阅包含的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");
    };
}

Angular 8 支持

如果您正在使用Angular 8，则需要一个临时的修复方案来解决 @ViewChild 指令的问题，而在Angular 9中不再需要

@ViewChild("MapView", {static: false}) mapView: ElementRef;

Angular 10 支持

正在开发对完整的Angular 10（包含Ivy编译器）的支持，并将在从今天（2020年9月6日）开始的下两周内发布。

聚类支持（问题 #57）

多亏了 @naderio，正在开发一个单独的插件：请参阅 nativescript-google-maps-utils。

获取帮助

与Nativescript社区联系是获取帮助的最佳选择。

如果您有任何问题，请先查看是否有人在 Stack Overflow 上遇到过类似的情况。如果您找不到任何信息，请尝试 自己提问。请确保添加任何需要重现问题的详细信息，并包含“NativeScript”和 "google-maps" 标签，以便您的提问能够被NativeScript社区看到。

如果您需要比Stack Overflow可以提供的问答格式更多的帮助，请尝试 加入NativeScript社区Slack。Slack聊天是获取帮助和解决问题、以及与其他NativeScript开发者建立联系的好地方。

最后，如果您发现了NativeScript Google Maps SDK本身的问题，或请求新功能，请在此处报告它们 问题。