NativeScript Google Maps SDK插件

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

先决条件

iOS - 必须安装Cocoapods。

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

Google Maps API密钥 - 访问Google Developers Console，创建一个项目，并启用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]

设置

有关示例代码，请参阅此处

在此处查看实时演示

为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>标签之间插入以下内容来修改您的文件

<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/AndroidManifest.xml文件中在您的<application>标签之间插入以下内容来修改您的文件

<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

通过将xmlns:maps="nativescript-google-maps-sdk"命名空间添加到您的<Page>标签中，修改您的视图，然后使用<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;

自定义信息窗口（Beta）

[!警告] 如果您使用 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能提供的问答格式更多的帮助，尝试加入NativeScript社区Slack。Slack聊天是获取帮助排查问题以及与其他NativeScript开发者交流的好地方。

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