谷歌地圖不能用於第二次使用javascript

我曾經見過一些關於類似問題的問題，但他們都沒有解決我的問題，所以我會繼續。谷歌地圖不能用於第二次使用javascript

我有一個谷歌地圖以下問題：我嘗試加載帶有谷歌地圖模式對話框使用JavaScript調用它：

<html> 
    <body> 
     <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script> 

     <a onclick="locationDetail(76)" id="76" data-toggle="modal" data-target="#myModalLocationDetails">Edit</a> 

     <div id="myModalLocationDetails" class="modal modal modal-metro border-mauve fade in" aria-hidden="false" aria-labelledby="myModalLabel" role="dialog" tabindex="-1" style="display: none;"> 
      <div class="modal-header"> 
      </div> 
      <div class="modal-body"> 
       <div id="locationEdit" class="col-md-12"> 
       </div> 
      </div> 
      <div class="modal-footer"> 
       <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
      </div> 
     </div> 
    </body> 
</html>

JavaScript函數：

function locationDetail(locId) { 
    $("#locationEdit").load('/Home/LocationEdit/' + locId, function() { 
      initialize(44.7862, 20.45345); 
     } 
    ); 
}

代碼載荷#locationEdit（LocationEdit.html）是：

<html> 
<head></head> 
<body> 
<script type="text/javascript"> 

function initialize(latitude, longitude) { 

    var myLatlng = new google.maps.LatLng(latitude, longitude); 

    var map = new google.maps.Map(document.getElementById('map-canvas'), { 
     zoom: 12, 
     center: myLatlng, 
     //mapTypeId: google.maps.MapTypeId.ROADMAP, 
     zoomControl: true, 
     panControl: true 
    }); 

    var marker = new google.maps.Marker({ 
     position: myLatlng, 
     map: map 
    }); 
} 

</script> 

<div id="map-canvas"> 
</div> 
<button type="button" class="btn btn-primary" onclick="initialize(44.7862, 20.45345)">Update</button> 
</body> 
</html>

當我點擊編輯，模態對話框顯示（樣式從display =「none」變爲display =「block」），地圖顯示OK。當我關閉模式對話框後，點擊關閉並再次點擊編輯時載入模式對話框，我的地圖顯示中斷，如問題圖片所示：Google Maps Api v3 Maps in Ui-Tabs are cut

當我點擊更新地圖加載好！這似乎是在.load（）中調用initialize（）函數的問題......或者不......我不知道。

我試過這個解決方案： - Google Maps Api v3 Maps in Ui-Tabs are cut 也這樣： - jquery click doesn't work on ajax generated content

這些解決方案並沒有爲我工作。非常感謝您的提示！

編輯：我解決調用引導事件的問題：

$(function() { 
    $('#myModalLocationDetails').on('shown.bs.modal', function() { 
     initialize(44.7862, 20.45345); 
    }); 
});

有在http://getbootstrap.com/javascript/#modals-usage此事件調用文檔。

你知道一些其他方式做這不使用引導，但一些其他的jQuery事件嗎？謝謝！

來源

2014-03-13 kiriz

'google.maps.event.trigger（地圖， '調整'）;'作爲'最後一行initialize（）'沒有工作？ – davidkonrad

@davidkonrad，它沒有工作 – kiriz

嘗試.load之前清理#locationEdit DIV（） - 像

function locationDetail(locId) { 
    $("#locationEdit").html(''); // or $("#locationEdit").empty(); 
    $("#locationEdit").load('/Home/LocationEdit/' + locId, function() { 
      initialize(44.7862, 20.45345); 
     } 
    ); 
}

來源

2014-03-13 16:28:50 dark4p

它沒有幫助 – kiriz

谷歌地圖不能用於第二次使用javascript

回答

相關問題