谷歌地图无法在 Meteor Cordova 中正确呈现

Question

大家好，我对 dburles 谷歌地图和 Meteor Cordova 应用程序有疑问。我有这个 html

<template name="googleMapsStatusFree">
    <div class="map-container">
        {{> googleMap name="map" options=mapOptions}}
    </div>
</template>

这个js onCreated

    Template.googleMapsStatusFree.onCreated(function () {

    // We can use the `ready` callback to interact with the map API once the map is ready.
    GoogleMaps.ready('map', function (map) {

        //definisco le variabili che mi serviranno
        let marker;

        //Array che contiente i marker e che ad ogni cambio di prodotto viene svuotato
        let gmarkers = [];

        //Funzione firata ad ogni cambio di prodotto
        Tracker.autorun(function () {

            if (variabileReattivaRispostaApp.get() || variabileReattivaHistoryProduct.get()) {

                //svuoto i marker precedentemente settati
                for(let i=0; i<gmarkers.length; i++){
                    gmarkers[i].setMap(null);
                }

                if (variabileReattivaRispostaApp.get()){

                    console.log("Scansionato");

                    let lat = variabileReattivaRispostaApp.get().ProdottoLat;
                    let lng = variabileReattivaRispostaApp.get().ProdottoLng;

                    //e restituisco il marker
                    marker = new google.maps.Marker({
                        position: new google.maps.LatLng(lat, lng),
                        map: map.instance,
                    });

                    //lo aggiungo alla lista
                    gmarkers.push(marker);

                    //e setto le proprieta della nuova mappa
                    map.instance.setCenter({
                        lat: lat,
                        lng: lng
                    });
                    map.instance.setZoom(10)
                }

                if (variabileReattivaHistoryProduct.get()){

                    console.log("History")


                    let lat = variabileReattivaHistoryProduct.get().ProdottoLat;
                    let lng = variabileReattivaHistoryProduct.get().ProdottoLng;

                    //e restituisco il marker
                    marker = new google.maps.Marker({
                        position: new google.maps.LatLng(lat, lng),
                        map: map.instance,
                    });

                    //lo aggiungo alla lista
                    gmarkers.push(marker);

                    //e setto le proprieta della nuova mappa
                    map.instance.setCenter({
                        lat: lat,
                        lng: lng
                    });
                    map.instance.setZoom(10)
                }
            }
        });
    });
});

还有这个助手

Template.googleMapsStatusFree.helpers({

    //Funziona che viene passata al template per la mappa
    mapOptions: function () {

        // Make sure the maps API has loaded
        if (GoogleMaps.loaded()) {

            let lat;
            let lng;

            if (variabileReattivaHistoryProduct.get()) {
                lat = variabileReattivaHistoryProduct.get().ProdottoLat;
                lng = variabileReattivaHistoryProduct.get().ProdottoLng
            }

            if (variabileReattivaRispostaApp.get()) {
                lat = variabileReattivaRispostaApp.get().ProdottoLat;
                lng = variabileReattivaRispostaApp.get().ProdottoLng
            }

            console.log(lat + "," + lng);


            //ritorno le opzioni tra cui le coordinate memorizzate nel prodotto selezionato
            return {
                name: 'map',
                element: document.getElementById('map'),
                center: new google.maps.LatLng(lat, lng),
                zoom: 10
            };

        }
    },
});

和启动

Meteor.startup(function(){
   GoogleMaps.load()
})

现在我得到了这个结果：

当我第一次点击时，我遇到了这个问题：谷歌地图渲染，但没有像这张图片那样显示地图层

当点击右上角的调整地图大小时，我有这个

然后当我调整大小时。我得到了想要的结果。

那么，我怎样才能在第一次尝试时获得想要的结果？

Answer 1

我有时会遇到同样的问题，这个 sn-p 对我来说是一个可行的解决方法：

google.maps.event.trigger(map.instance, 'resize');

将其放在 GoogleMaps.ready() 函数的末尾。

希望对你有帮助。