NativeScript 的 Google Maps 插件

进行中！

在此处添加您的插件徽章。例如，请参阅nativescript-urlhandler。

然后描述您的插件用途。

如果您开发 UI 插件，您可以在此处添加一些截图。

安装

ns plugin add nativescript-gmaps

设置 Google Maps API 密钥

Android

在您的 App_Resources/Android/AndroidManifest.xml 文件中的 <application> 部分中添加以下行，将 "GOOGLE_MAPS_API_KEY" 替换为 Google 开发者控制台中的 Google Maps API 密钥

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

iOS

在 iOS 上，您只需要在使用 Google Maps 之前调用 setIosApiKey 并传入 API 密钥

NativeScript/Angular

import { GoogleMaps } from "nativescript-google-maps";

GoogleMap.setIosApiKey("GOOGLE_MAPS_API_KEY");

Vue

import Vue from "nativescript-vue";
import GoogleMaps from "nativescript-google-maps/vue";

GoogleMaps.setIosApiKey("GOOGLE_MAPS_API_KEY");

Vue.use(GoogleMaps);

基本用法

NativeScript

<Page
    xmlns="http://schemas.nativescript.org/tns.xsd"
    xmlns:gmap="nativescript-google-maps">
    <GridLayout>
        <gmap:GoogleMap
            cameraPosition="-33.852,151.211">
            <gmap:Marker
                position="-33.852,151.211"/>
        </GoogleMap>
    </GridLayout>
</Page>

Vue

<template>
    <Page>
        <GridLayout>
            <GoogleMap
                :cameraPosition="cameraPosition">
                <GMapMarker
                    :position="markerPosition"/>
            </GoogleMap>
        </GridLayout>
    </Page>
</template>

<script lang="ts">
import Vue from "nativescript-vue";

export default Vue.extend({
    data() {
        return {
            cameraPosition: {
                latitude: -33.852,
                longitude: 151.211,
                zoom: 18
            },
            markerPosition: {
                latitude: -33.852,
                longitude: 151.211
            }
        }
    }
});
</script>

API & 示例

GoogleMap

圆

地面覆盖物

标记

多边形

折线

许可证

Apache 许可协议第 2 版，2004 年 1 月