NativeScript Google Maps SDK 插件

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

先决条件

iOS - 已安装 Cocoapods，请参阅 入门指南

Android - 已安装最新的 Google Play services SDK，请参阅 安装指南

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

安装

使用 NativeScript CLI 工具安装插件

tns plugin add nativescript-uber

设置 Google Maps API

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

实时演示 这里

设置 Android API Key

首先复制 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 字符串，并用您的 API 键替换 PUT_API_KEY_HERE。

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

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

project.ext {
    googlePlayServicesVersion = "+"
}

设置 iOS API Key

在您的应用程序主脚本 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本身的问题，或请求新功能，请在此处报告它们 问题。