NativeScript 的 Google Maps SDK 插件

此存储库是从 dapriett/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 密钥。

安装

使用 NativeScript CLI 工具安装插件

Nativescript 7+

tns plugin add nativescript-google-maps-sdk

Nativescript < 7

tns plugin add [email protected]

设置

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

请在此处查看实时演示 here

为 Android 配置 API 密钥

Nativescript < 4

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

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

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

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

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

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/nativescript_google_maps_api.xml 文件中的 nativescript_google_maps_api_key 字符串，并使用您之前创建的 API 密钥替换 PUT_API_KEY_HERE 来修改您的 app/App_Resources/Android/src/main/res/values/nativescript_google_maps_api.xml 文件。

最后，通过在您的 app/App_Resources/Android/src/main/AndroidManifest.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 密钥（使用您之前创建的 API 密钥替换 PUT_API_KEY_HERE）

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样式参考](https://developers.google.com/maps/documentation/android-api/style-reference) | [样式向导](https://mapstyle.withgoogle.com/))。

Angular

在onMapReady事件处理器内部使用this.mapView.setStyle(<Style>JSON.parse(this.styles));。在此示例中，this.mapView是MapView对象，this.styles是使用[样式向导](https://mapstyle.withgoogle.com/)创建的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;

自定义信息窗口（Beta）

[!WARNING]如果您使用NS7，则infoWindowTemplate将无法从xml文件中工作！一个临时解决方案是在代码后面声明infoWindow模板，如下所示：

var mapView = null;

export function onMapReady(args) {
    mapView = args.object;
    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>`;
}

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

<!-- /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;

聚合支持（问题#57）

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

获取帮助

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

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

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

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