對話框中的Google地圖可視化錯誤

我開發了一個帶有knockout.js和Google Maps API for JavaScript的Web應用程序。對話框中的Google地圖可視化錯誤

首先，我爲地理定位功能創建了一個模板。模板定義如下：

<script id="geolocalization-template" type="text/html"> 
    <div id="mapsAddress"> 
     <div id="maps-header" class="section tableCentred"> 
      <table class="tableCentred"> 
       <tr class="ucTitle"> 
        <td>Address Type</td> 
        <td>Zip Code</td> 
        <td>District</td> 
        <td>City</td> 
        <td>Street</td> 
       </tr> 
       <tr> 
        <td>Advertized Address</td> 
        <td><input id="txZipCode" type="text" data-bind="value: AdvertizedAddress.ZipCode"/></td> 
        <td><input id="txProvince" type="text" data-bind="value: AdvertizedAddress.AreaCode"/></td> 
        <td><input id="txCity" type="text" data-bind="value: AdvertizedAddress.Town"/></td> 
        <td><input id="txStreet" type="text" data-bind="value: AdvertizedAddress.Street"/></td> 
       </tr> 
       <tr> 
        <td>Normalized Address</td> 
        <td><label id="txNorZipCode" data-bind="text: NormalizedAddress.ZipCode"/></td> 
        <td><label id="txNorProvince" data-bind="text: NormalizedAddress.AreaCode"/></td> 
        <td><label id="txNorCity" data-bind="text: NormalizedAddress.Town"/></td> 
        <td><label id="txNorStreet" data-bind="text: NormalizedAddress.Street"/></td> 
       </tr> 
      </table> 
     </div> 
     <div class="clear"></div> 
     <div id="maps" class="maps"></div> 
    </div> 
</script>

我爲我的jQuery對話框創建了兩個div。這是代碼：

<!-- 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>

在我的項目，我必須連接到這個JavaScript函數的兩個按鈕：

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"); 
         } 
        } 
       ] 
      }); 
},

這是我initMap功能：

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); 
     } 
    },

所以，這是我的場景。現在我的問題是這樣的：第一次我打開對話框，我可以查看地圖像下面的圖片：

如果我結束我的對話，我試圖重新打開它，我無法查看我的地圖，如如下圖：

現在，魔術是：我按CTRL + F在我的瀏覽器，我可以查看我的地圖：

你能幫幫我嗎？謝謝

來源

2016-04-14 ilMattion

我發現這個問題的一個解決方案。我改變了我的initMap功能與這行代碼：

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

所以我initMap功能就會像下面的代碼：

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); 
     } 
    },

來源

2016-04-15 08:46:40 ilMattion

對話框中的Google地圖可視化錯誤

回答

相關問題