NativeScript Google 地图 Api - Google 地图显得太小

Question

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

tns --version 6.1.2

我正在使用 this plugin 来尝试显示 Google 地图。

地图出现并且没有抛出任何错误，但是地图太小，我看不到标记。

这是我的代码片段：

组件：

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);

}
}

模板：

<ScrollView>
    <Page class="page">
        <StackLayout>

            <Label class="h3" text="Maps"></Label>

            <GridLayout>
                <MapView
                    #mapView
                    i-padding="50,50,50,50"
                    (mapReady)="onMapReady($event)"
                    iosOverflowSafeArea="true">
                </MapView>
            </GridLayout>

        </StackLayout>
    </Page>
</ScrollView>

Answer 1

我怀疑这是因为您将 MapView 包裹在 StackLayout 中。您将不得不使用单个 GridLayout 并将标签下方的所有 space 分配给 MapView。

<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>

两者之间，您应该只在必要时使用 ScrollView，主要是在 Page 中而不是在 Page 之上。页面被设计为放置在框架内，完全用于导航目的。

在 https://www.nslayouts.com/

了解有关布局的更多信息

NativeScript Google 地图 Api - Google 地图显得太小

NativeScript Google Maps Api - Google Maps appearing too small

android

google-maps

nativescript