Question

我想将Google Maps API 3集成到一个使用不同类型的JavaScript框架的Web应用程序中，例如： jQuery，Highcharts，jPolite等。这是我使用的代码

<!-- 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＆＃34; map-canvas＆＃34;是空的。这意味着高度不是问题。

我尝试用不同的浏览器（Firefox，Chrome，IE）打开它，我什么也看不见。 真的很奇怪的是，当我用开放式工具栏打开的Firefox打开它时，它几乎每次都会加载??！？

此外，只有在我使用Ctrl + F5（忽略缓存）刷新页面时才会显示地图。只有F5没有显示任何内容。

我认为这很简单，我很想念。但是，我可能会遇到其他框架的冲突。

感谢任何帮助！

Answer 1

解决方案是使用回调函数异步加载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
    }
}

谷歌地图API 3表现得很奇怪

1 个答案: