NativeScript谷歌地图Api -谷歌地图看起来太小了

Question

我正在用NativeScript v6和Angular 8写一个应用程序。

tns --版本6.1.2

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

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

​

​

下面是我的代码片段：

组件：

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

我怀疑这是因为您在StackLayout中包装了MapView。您必须使用单个GridLayout，并将label下的所有空间分配给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，主要是在页面中而不是页面上方。页面被设计为放在框架内，完全是为了导航目的。

了解有关布局的更多信息，请访问https://www.nslayouts.com/