谷歌地图在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

我面临着同样的问题，有时，这片段是一个工作的解决方法对我来说：

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

地方，在你的GoogleMaps.ready()函数的末尾。

希望它有帮助。