市场平台
作者 NativeScript.org
NativeScript-Google-SDK
作者：valio.stoychev | v0.1.18
包含将 Google SDK 添加到 NativeScript 项目的说明。
npm i --save nativescript-google-sdk

NativeScript Google Maps SDK 插件

插件处于实验状态！

如果您想贡献，请发送拉取请求。源代码可在 GitHub 上找到。

使用 NativeScript Google Maps SDK 插件，您可以轻松地将原生 Google Maps API 以跨平台方式用于 Android 和 iOS。

安装

使用 NativeScript CLI 工具安装插件

插件可作为 npm 包安装。

首先，您需要创建一个 NativeScript 项目。如果您是 NativeScript 新手，请遵循 NativeScript 的 入门指南 创建您的应用。

创建应用后，在命令提示符下，在 NativeScript 项目的根目录中，运行以下命令。

tns plugin add nativescript-google-sdk

现在您已安装了插件。在本版本中，插件不会添加原生 Google SDK，因此您需要手动添加。

如果您是 GooglePlayServices 新手，请阅读有关如何在您的机器上安装原生 GooglePlay 服务的 官方指南。确保安装最新的 SDK，以确保整个 API 可用。

安装 GooglePlay 服务后，对于 Android，请运行以下命令

tns library add android "path to the GooglePlayServices SDK"

例如

tns library add android "C:\Users\me\AppData\Local\Android\android-sdk\extras\google\google_play_services\libproject\google-play-services_lib"

这将添加原生库到 NativeScript 项目，并使原生 API 可供 JavaScript 消费。

下一步是修改 AndroidManifest.xml 文件。它位于您的项目文件夹中的 platforms/android/ 文件夹。请将两个 <application> 部分的内合并为一个部分。这就是您需要在 AndroidManifest.xml 文件中做的所有事情。

下一步是设置 GooglePlay API_KEY。它对每个应用和每个用户都是特定的，因此您需要从 Google 服务中获取它。以下是 如何获取该密钥的教程。

在 AndroidManifest.xml 文件中的 <meta-data android:name="com.google.android.geo.API_KEY" 条目中设置 API_KEY。

现在您已完成设置，可以开始在您的应用程序中使用插件了！按照以下步骤了解如何使用插件并将地图添加到您的应用程序 UI 中。

将地图添加到屏幕上。

修改 /app/main-page.xml 文件，使其看起来像这样

 <Page 
	xmlns="http://www.nativescript.org/tns.xsd"
	xmlns:googleSDK="tns_modules/nativescript-google-sdk"
	>
  <GridLayout>
    <googleSDK:MapView/>
  </GridLayout>
</Page>

然后执行

tns run android

这将显示具有默认设置的 MapView。要设置 MapView 组件的行为，您需要处理 mapCreated 事件并配置它。修改 /app/main-page.xml 文件中的 xml 声明，将 MapView 设置为以下内容

<googleSDK:MapView mapReady="OnMapReady"/>

然后在 JS 代码后（在 /app/main-page.js 文件中）声明 mapReady 回调

function OnMapReady(args) {
	var mapView = args.object.android;

	var gMap = mapView.getMap();

	/*
	 * gMap is the reference to the native GoogleMap object. See the native  API reference 
	 * to configure the map - https://developers.google.com/android/reference/com/google/android/gms/maps/GoogleMap
	 *
	 * The code below is a sample implementation which will open the map with location and marker set to Sydney, Australia.
	 *
	 */
	var latlng = new com.google.android.gms.maps.model.LatLng(-33.86, 151.20);

	gMap.setMyLocationEnabled(true);
	console.log("gMapsPlugin:onMapReady:LocationENabled");

	gMap.moveCamera(com.google.android.gms.maps.CameraUpdateFactory.newLatLngZoom(latlng, 13));
	console.log("gMapsPlugin:onMapReady:CameraMoved");       

	markerOptions = new com.google.android.gms.maps.model.MarkerOptions();
	markerOptions.title("Sydney");
	markerOptions.snippet("Australia");

	markerOptions.position(latlng);
	console.log("gMapsPlugin:onMapReady:SettingMarker");

	gMap.addMarker(markerOptions);
	console.log("gMapsPlugin:onMapReady:MarkerSet");
}
exports.OnMapReady = OnMapReady;

现在执行

tns run android

并享受您设备上的悉尼，澳大利亚地图。

如果您有任何问题、疑问或建议，非常欢迎您在GitHub上提交问题。

// support is coming for iOS

[返回顶部][1]

许可

本软件遵循Apache 2.0许可协议，许可内容在此引用。