2016-04-14 20 views
0

JavaScript için knockout.js ve Google Haritalar API'sı ile bir web uygulaması geliştirdim.İletişim kutusunda Google Haritalar görselleştirme hatası

Her şeyden önce, coğrafi konumlandırma işlevi için bir şablon oluşturdum. Şablon şu şekilde tanımlanır: 0Query iletişim kutularım için iki div oluşturdum. İki bu JavaScript işlevlerine bağlı düğmeleri Projemin İçinde

<!-- Dialog Puntual Geolocalization --> 
<div id="geolocalization-puntual-dialog" class="dialog" data-bind="template: { name: 'geolocalization-template', data: BaseViewModel.puntual }"></div> 

<!-- Dialog Massive Geolocalization --> 
<div id="geolocalization-massive-dialog" class="dialog" data-bind="template: { name: 'geolocalization-template', data: BaseViewModel.massive }"></div> 

: Bu kodu

OpenDialogPunctualGeocoding : function(){ 
    $("#geolocalization-punctual-dialog").dialog(
       { 
        width: dialogWidth, 
        height: dialogHeight, 
        create: BasicViewModel.geo.initMap("punctual"), 
        buttons: [ 
         { 
          text: ShowOnMap, 
          click: function() { 
           BasicViewModel.geo.ShowOnMap("punctual"); 
          } 
         }, 
         { 
          text: ShopDBResources.Save, 
          click: function() { 
           BasicViewModel.geo.GeolocalSave(); 
           $("#geolocalization-punctual-dialog").dialog("close"); 
          } 
         } 
        ] 
       }); 
}, 
OpenDialogMassiveGeocoding : function(){ 
    $("#geolocalization-massive-dialog").dialog(
      { 
       width: dialogWidth, 
       height: dialogHeight, 
       create: BasicViewModel.geo.initMap("massive"), 
       buttons: [ 
        { 
         text: ShowOnMap, 
         click: function() { 
          BasicViewModel.geo.ShowOnMap("massive"); 
         } 
        }, 
        { 
         text: Save, 
         click: function() { 
          $("#geolocalization-massive-dialog").dialog("close"); 
         } 
        } 
       ] 
      }); 
}, 

Bu benim initMap fonksiyonudur:

initMap: function (entityType) { 
     if (!entityType) 
      return; 

     var query = undefined; 
     if (entityType == "puntual"; 
      query = "#geolocalization-puntual-dialog div#maps"; 
     else if (entityType == "massive") 
      query = "#geolocalization-massive-dialog div#maps"; 

     try{ 
      map = new google.maps.Map($(query)[0], { 
       center: BasicViewModel.GoogleMapsDefaults.center, 
       zoom: BasicViewModel.GoogleMapsDefaults.zoom 
      }); 
      var infoWindow = new google.maps.InfoWindow({ map: map }); 

      if (navigator.geolocation) { 
       navigator.geolocation.getCurrentPosition(function (position) { 
        var pos = { 
         lat: position.coords.latitude, 
         lng: position.coords.longitude 
        }; 

        infoWindow.setPosition(pos); 
        infoWindow.setContent('Location found.'); 
        map.setCenter(pos); 
       }, function() { 
        handleLocationError(true, infoWindow, map.getCenter()); 
       }); 
      } else { 
       BasicViewModel.geo.handleLocationError(false, infoWindow, map.getCenter()); 
      } 
     } catch (ex) { 
      WriteToConsole("Error on initializing Google Maps:" + ex.ErrorNumber + " Error message:" + ex.message); 
     } 
    }, 

Yani, bu benim senaryo. Şimdi benim sorunum şudur: Benim iletişim kutusunu kapatın ve bunu yeniden denerseniz Correct view.

, şöyle benim haritaları görüntülemek alamazsınız: iletişim kutusunu açmak ilk kez aşağıdaki resim gibi haritaları görüntüleyebilirsiniz aşağıdaki resim: Tarayıcımdaki CTRL + F tuşlarına basın ve benim haritaları görüntüleyebilirsiniz: I can view my maps again

lütfen bana yardım edebilir Not correct view

Şimdi, sihir bu? Teşekkürler

cevap

0

Bu sorun için bir çözüm buldum.

try{ 
      map = new google.maps.Map($(query)[0], { 
       center: BasicViewModel.GoogleMapsDefaults.center, 
       zoom: BasicViewModel.GoogleMapsDefaults.zoom 
      }); 
      google.maps.event.trigger(map, 'resize'); 

      var infoWindow = new google.maps.InfoWindow({ map: map }); 

      if (navigator.geolocation) { 
       navigator.geolocation.getCurrentPosition(function (position) { 
        var pos = { 
         lat: position.coords.latitude, 
         lng: position.coords.longitude 
        }; 

        infoWindow.setPosition(pos); 
        infoWindow.setContent('Location found.'); 
        map.setCenter(pos); 
       }, function() { 
        handleLocationError(true, infoWindow, map.getCenter()); 
       }); 
      } else { 
       BasicViewModel.geo.handleLocationError(false, infoWindow, map.getCenter()); 
      } 
     } catch (ex) { 
      WriteToConsole("Error on initializing Google Maps:" + ex.ErrorNumber + " Error message:" + ex.message); 
     } 
    }, 
:
google.maps.event.trigger(map, 'resize'); 

Yani benim initMap işlevi aşağıdaki kodu gibi olacak: Ben bu kod satırı ile benim initMap işlevini değiştirdi