NativeScript Google Maps Api - Google Maps 为空白答案

【问题标题】：NativeScript Google Maps Api - Google Maps is blankNativeScript Google Maps Api - Google Maps 为空白
【发布时间】：2020-01-28 14:40:38
【问题描述】：

我正在使用 NativeScript v6 和 Angular 8 编写应用程序。

tns --version 6.1.2

我正在使用这个插件来尝试显示谷歌地图。

地图出现，没有抛出任何错误，但地图是空白的。

这是我的代码 sn-p：

模板

<Page class="page">
    <GridLayout rows="auto,*">
        <Label row="0" class="h3" text="Maps"></Label>
        <MapView
            row="1"
            #mapView
            i-padding="50,50,50,50"
            (mapReady)="onMapReady($event)"
            iosOverflowSafeArea="true">
        </MapView>
    </GridLayout>
</Page>

组件

[![import { Component, OnInit } from '@angular/core';
//import { registerElement } from 'nativescript-angular/element-registry';
import { MapView, Marker, Position } from "nativescript-google-maps-sdk";

import { ElementRef, ViewChild } from "@angular/core";
import { registerElement } from "nativescript-angular/element-registry";

// Important - must register MapView plugin in order to use in Angular templates
registerElement('MapView', () => MapView);

@Component({
    selector: "ns-clocking",
    templateUrl: "./clocking.component.html",
    styleUrls: \["./clocking.component.css"\],
    moduleId: module.id
})
export class ClockingComponent implements OnInit {

    mapView: MapView;

    constructor() {}

    public ngOnInit() {}

    public onMapReady(event) {
        console.log(" map ready ");

        const mapView = event.object;

        this.mapView = mapView;

        const NA_CENTER_LATITUDE = 39.8283459;
        const NA_CENTER_LONGITUDE = -98.5816737;

        this.mapView.latitude = NA_CENTER_LATITUDE;
        this.mapView.longitude = NA_CENTER_LONGITUDE;
        this.mapView.zoom = 3;

        const stLouisCoordinates = {
            latitude: 38.619081,
            longitude: -90.196846
        };

        const stLouisMarker = new Marker();
        stLouisMarker.position = Position.positionFromLatLng(
            stLouisCoordinates.latitude,
            stLouisCoordinates.longitude
        );
        stLouisMarker.title = "St. Louis, MO";
        stLouisMarker.snippet = "Go Cardinals!";
        stLouisMarker.color = "#6B8E23";
        this.mapView.addMarker(stLouisMarker);

    }
}

AndroidManifest

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

我在不同的设置中使用了相同的密钥并且它有效：https://jsfiddle.net/aubz88/6frk9evm/3/

【问题讨论】：

您确定没有对密钥设置任何限制吗？您是否在帐户上启用了 Google 地图服务？

标签： android google-maps nativescript

【解决方案1】：

是的，我也遇到过同样的问题。请检查您的 Google 开发者控制台，其中是否为 iOS/Android 启用了 Google Maps API。

也可以参考https://market.nativescript.org/plugins/nativescript-google-maps-sdk

这对我有用，根据您的要求使用代码 Angular 8 或 Plain JS/TS

【讨论】：