@nativescript/google-maps

ns plugin add @nativescript/google-maps

配置

Android

修改 AndroidManifest 文件以包含新的元标签和您的 API 密钥，该文件位于 App_Resources/Android/AndroidManifest.xml

<application
  android:name="com.tns.NativeScriptApplication"
  android:allowBackup="true"
  android:icon="@mipmap/ic_launcher"
  android:label="@string/app_name"
  android:theme="@style/AppTheme"
  android:hardwareAccelerated="true">

  <meta-data
    android:name="com.google.android.geo.API_KEY"
    android:value="youKey"/>
</application>

iOS

修改 Info.plist 文件以包含新的元标签和您的 API 密钥，该文件位于 App_Resources/iOS/Info.plist

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
  <dict>
    <key>TNSGoogleMapsAPIKey</key>
    <string>yourKey</string>
  </dict>
</plist>

用法

核心

重要：请确保在 Page 元素中包含了 xmlns:map="@nativescript/google-maps" 属性

<map:MapView
	ready="onReady"
	mapTap="onTap"
	mapLongPress="onLongPress"
	markerTap="onMarkerTap"
/>

Angular

import { GoogleMapsModule } from '@nativescript/google-maps/angular';

@NgModule({
    imports: [
			GoogleMapsModule
    ],
    declarations: [
        AppComponent
    ],
    bootstrap: [AppComponent]
})

<MapView
	(ready)="onReady($event)"
	(mapTap)="onTap($event)"
	(mapLongPress)="onLongPress($event)"
	(markerTap)="onMarkerTap($event)"
>
</MapView>

Vue

import Vue from 'nativescript-vue'
import GoogleMaps from '@nativescript/google-maps/vue'

Vue.use(GoogleMaps)

<MapView
	@ready="onReady"
	@mapTap="onTap"
	@mapLongPress="onLongPress"
	@markerTap="onMarkerTap"

/>

许可证

Apache 许可协议 2.0 版