Google Maps API 3怪異

-1

我想將Google Maps API 3集成到使用不同類型JavaScript框架的Web應用程序中，例如， jQuery，Highcharts，jPolite等。這是我正在使用的代碼Google Maps API 3怪異

<!-- Map --> 
<div style="height: 450px;"> 
    <div id="map-canvas" style="width: 85%; height: 400px; float: left; margin-right: 10px;">  </div> 
</div> 

<script type="text/javascript"> 

jQuery(function() { 
var map; 

// 36.557372, 127.953339 
function initialize() { 
    var mapOptions = { 
     center: new google.maps.LatLng(36.557, 127.953), 
     zoom: 6, 
     mapTypeid: google.maps.MapTypeId.ROADMAP 
    }; 

    // Create a simple map. 
    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); 

    var drawingManager = new google.maps.drawing.DrawingManager({ 
     drawingMode: google.maps.drawing.OverlayType.MARKER, 
     drawingControl: true, 
     drawingControlOptions: { 
      position: google.maps.ControlPosition.TOP_CENTER, 
      drawingModes: [ 
      google.maps.drawing.OverlayType.MARKER, 
      google.maps.drawing.OverlayType.CIRCLE, 
      google.maps.drawing.OverlayType.POLYGON, 
      google.maps.drawing.OverlayType.POLYLINE, 
      google.maps.drawing.OverlayType.RECTANGLE 
      ] 
     }, 
     polygonOptions: { 
      editable: true 
     } 
     }); 
     drawingManager.setMap(map); 

    google.maps.event.addListener(drawingManager, 'polygoncomplete', function(polygon) { 
     polygon.getPath().forEach(function(elem, index){ 
      var elemCoords = new Array(); 
      elemCoords.push(elem.lat()); 
      elemCoords.push(elem.lng()); 
     }); 
    }); 
} 

google.maps.event.addDomListener(window, 'load', initialize); 
});

本身就是一段非常簡單的代碼。然而，它被集成在一個更復雜的HTML結構中（這可能是一個問題）。閱讀入門指南並觀看底部視頻後，我認爲問題在於層次結構中某個DOM元素的高度和寬度。但經過多次測試後，我看到地圖甚至沒有被加載，即div「map-canvas」爲空。這意味着高度不是問題。

我試着用不同的瀏覽器（Firefox，Chrome，IE）打開它，我什麼也沒看到。 真的很奇怪的是，當我用開放工具欄的Firefox打開它時，幾乎每次都會加載？！？！

此外，僅當我使用Ctrl + F5（忽略緩存）刷新頁面時纔會顯示地圖。只有F5不顯示任何內容。

我覺得這很簡單，我失蹤了。然而，與其他我沒有看到的框架可能會有一些衝突。

任何幫助表示讚賞！

來源

2014-10-16 paf

[發佈的代碼對我有用]（http://jsfiddle.net/L6fsus7g/）。你還沒有發佈有問題的部分。請創建一個展示此問題的[最小，完整，測試和可讀示例]（http://stackoverflow.com/help/mcve）。 – geocodezip 2014-10-16 17:05:32

問題是我不知道有問題的部分是什麼。這就是我想要弄明白的。我只是想分享問題的「症狀」，以便可能有人能幫我弄明白。但至少現在我確定地知道那部分代碼是好的。所以謝謝你。 – paf 2014-10-17 16:34:00

解決方案是使用回調函數異步加載Google Maps API like this。我猜這個問題的原因是，在創建div佔位符之前API已被加載，所以地圖無處存儲。這可能是因爲jpolite框架或項目中正在使用的其他JavaScript框架。無論如何，我很高興我的工作。

function loadScript() { 
    if (!(typeof google === 'object' && typeof google.maps === 'object')) { 
     var script = document.createElement('script'); 
     script.id = 'gmapsScript'; 
     script.type = 'text/javascript'; 
     script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=drawing,geometry&' + 
       'callback=initialize'; 
     document.body.appendChild(script); 
    } 
    else { 
     // do something when the API was already loaded 
    } 
}

來源

2014-10-22 17:28:33 paf

Google Maps API 3怪異

回答

相關問題