NativeScript Google Maps SDK 插件

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

===

此项目是从 dapriett/nativescript-google-maps-sdk 分支出来的，我创建它是因为所有者不经常维护它。

此版本包括 Android 的新地图渲染器，Google Maps 正式 宣布。

先决条件

iOS - 必须安装 Cocoapods。

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

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

安装

使用 NativeScript CLI 工具安装插件

tns plugin add @kefah/nativescript-google-maps

设置

示例

请克隆 此插件示例，然后转到 tools/assets/App_Resources/Android/src/main/res/values/nativescript_google_maps_api.xml，将 Your_KEY 替换为您的真实 Google Maps 密钥。

然后运行 npm start，选择 apps.demo-angular.android 用于 Angular 或您的任何技术...

为 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 密钥。

最后，通过在 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 密钥修改该文件。

最后，通过在 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://schemas.nativescript.org/tns.xsd"
xmlns:lm="@kefah/nativescript-google-maps" navigatingTo="navigatingTo"  loaded="pageLoaded" class="page">
    <Page.actionBar>
        <ActionBar title="nativescript-google-maps" icon="" class="action-bar">
        </ActionBar>
    </Page.actionBar>
    <GridLayout>
        <lm:GoogleMaps
        latitude="{{ latitude }}" longitude="{{ longitude }}"
			zoom="{{ zoom }}" minZoom="{{ minZoom }}" maxZoom="{{ maxZoom }}"
			tilt="{{ tilt }}" bearing="{{ bearing }}"
			mapAnimationsEnabled="{{ mapAnimationsEnabled }}"
			i-padding="50,50,50,50" padding="{{ padding }}"
			mapReady="onMapReady"
			coordinateTapped="onCoordinateTapped"
			markerSelect="onMarkerEvent"
			markerBeginDragging="onMarkerEvent" markerEndDragging="onMarkerEvent" markerDrag="onMarkerEvent"
			markerInfoWindowTapped="onMarkerEvent" markerInfoWindowClosed="onMarkerEvent"
			cameraChanged="onCameraChanged"
			cameraMove="onCameraMove"
			indoorBuildingFocused="onIndoorBuildingFocused"
			indoorLevelActivated="onIndoorLevelActivated">
        </lm:GoogleMaps>
    </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事件触发后调整地图的UI设置，通过在mapView.settings上配置以下属性

样式

使用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
import { Observable, EventData, Page, Color, Application } from '@nativescript/core';
import { DemoSharedNativescriptGoogleMaps } from '@demo/shared';
import { Bounds, Circle, GoogleMaps, Marker, Polygon, Polyline, Position } from '@kefah/nativescript-google-maps';
import * as permissions from "nativescript-permissions";
let mapView = null;

let vmModule: DemoModel;
let style = require('./map-style.json');

export function navigatingTo(args: EventData) {
    requestPermissions()
	const page = <Page>args.object;
	page.bindingContext = new DemoModel();
    vmModule = page.bindingContext;
}

export function onMapReady(args) {
    mapView = args.object;

    console.log("onMapReady");
    mapView.settings.compassEnabled = true;
    mapView.settings.myLocationButtonEnabled = true;

    console.log("Setting a marker...");
    let marker = new Marker();
    marker.position = Position.positionFromLatLng(-33.86, 151.20);
    marker.title = "Sydney";
    marker.snippet = "Australia";
    marker.color = "green";
    marker.userData = {index: 1};
    marker.draggable = true;
    mapView.addMarker(marker);
}

自定义信息窗口（Beta）

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

<!-- /app/main-page.xml -->
<Page xmlns="http://schemas.nativescript.org/tns.xsd"
xmlns:lm="@kefah/nativescript-google-maps" navigatingTo="navigatingTo"  loaded="pageLoaded" class="page">
    <Page.actionBar>
        <ActionBar title="nativescript-google-maps" icon="" class="action-bar">
        </ActionBar>
    </Page.actionBar>
    <GridLayout>
        <lm:GoogleMaps
        latitude="{{ latitude }}" longitude="{{ longitude }}"
			zoom="{{ zoom }}" minZoom="{{ minZoom }}" maxZoom="{{ maxZoom }}"
			tilt="{{ tilt }}" bearing="{{ bearing }}"
			mapAnimationsEnabled="{{ mapAnimationsEnabled }}"
			i-padding="50,50,50,50" padding="{{ padding }}"
			mapReady="onMapReady"
			coordinateTapped="onCoordinateTapped"
			markerSelect="onMarkerEvent"
			markerBeginDragging="onMarkerEvent" markerEndDragging="onMarkerEvent" markerDrag="onMarkerEvent"
			markerInfoWindowTapped="onMarkerEvent" markerInfoWindowClosed="onMarkerEvent"
			cameraChanged="onCameraChanged"
			cameraMove="onCameraMove"
			indoorBuildingFocused="onIndoorBuildingFocused"
			indoorLevelActivated="onIndoorLevelActivated">
            <lm:GoogleMaps.infoWindowTemplate>
                <StackLayout orientation="vertical" width="200" >
                    <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>
            </lm:GoogleMaps.infoWindowTemplate>
        </lm:GoogleMaps>
    </GridLayout>
</Page>

...并像这样设置infoWindowTemplate属性

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

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

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

与Angular的用法

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

聚类支持（问题 #57）

由于 @naderio 的帮助，正在开发一个独立的插件：请参阅 nativescript-google-maps-utils。

获取帮助

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

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

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