Google地图在Meteor Cordova中无法正常渲染

Question

大家好，我对dburles谷歌地图和流星科尔多瓦应用程序有疑问。我有这个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
            };

        }
    },
});

和StartUp

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

现在我有了这个结果：

当我第一次点击时我有这个问题：谷歌地图渲染，但不显示像这个图像的地图层

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

然后当我调整大小。我有理想的结果。

那么，如何在第一次尝试时获得所需的结果？

Answer 1

我有时会遇到同样的问题，这段代码对我来说是一个有效的解决方法：

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

将其放在GoogleMaps.ready()功能的末尾。

希望它有所帮助。