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怪异

回答

相关问题