NativeScript 的 Google Maps SDK 插件

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

先决条件

iOS - 已安装 Cocoapods，请参考安装指南

Android - 已安装最新的 Google Play 服务 SDK，请参考安装指南

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

安装

使用 NativeScript CLI 工具安装插件

tns plugin add nativescript-uber

设置 Google Maps API

请参考此处的示例代码

在线演示在这里

设置 Android API 密钥

首先将 Android 的模板字符串资源文件复制过来

cp -r node_modules/nativescript-uber/platforms/android/res/values app/App_Resources/Android/

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

插件将默认使用 Android play-services-maps SDK 的最新版本。如果需要更改版本，可以在项目中添加一个扩展属性 googlePlayServicesVersion，如下所示

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

project.ext {
    googlePlayServicesVersion = "+"
}

设置 iOS API 密钥

在应用程序的主脚本 app.js 中，使用以下方法添加 API 密钥（将 PUT_API_KEY_HERE 替换为您的密钥）

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

如果您使用 Angular，需要修改 main.ts，如下所示

import * as platform from "platform";
declare var GMSServices: any;
....
if (platform.isIOS) { 
  GMSServices.provideAPIKey("PUT_API_KEY_HERE");
}

添加 UberView

修改您的视图，在您的页面中添加命名空间 xmlns:maps="nativescript-uber"，然后使用 <maps:mapView /> 标签创建 UberView。

 <!-- /app/main-page.xml -->
 <Page 
	xmlns="http://www.nativescript.org/tns.xsd"
	xmlns:maps="nativescript-uber"
	>
  <GridLayout>
    <maps:mapView latitude="{{ latitude }}" longitude="{{ longitude }}" 
    								zoom="{{ zoom }}" bearing="{{ bearing }}" 
    								tilt="{{ tilt }}" padding="{{ padding }}" mapReady="onMapReady"  
   								markerSelect="onMarkerSelect" markerBeginDragging="onMarkerBeginDragging"
   								markerEndDragging="onMarkerEndDragging" markerDrag="onMarkerDrag"
   								cameraChanged="onCameraChanged" />
  </GridLayout>
</Page>

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

以下事件可用

属性 gMap 可让您访问原始平台地图对象 - 请参阅它们的 SDK 参考，了解如何使用它们（iOS | Android）

//  /app/main-page.js

var mapsModule = require("nativescript-uber");

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);
}

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

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

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

样式

使用 gMap.setStyle(style); 来更改地图样式。

有关地图样式，请参阅 Google Maps 样式参考 和 样式向导。

与 Angular 一起使用

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

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

// Important - must register UberView plugin in order to use in Angular templates
registerElement("UberView", () => require("nativescript-uber").UberView);

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

    @ViewChild("UberView") mapView: ElementRef;

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

聚类支持（问题 #57）

感谢 @naderio 开发了一个独立的插件 - 请参阅 nativescript-google-maps-utils

获取帮助

向 Nativescript 社区寻求帮助是您获得帮助的最佳选择。

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

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

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