0

我正在通过 AJAX 调用异步加载 Google Maps API，并且我没有收到任何错误子屏幕，并且 Google API 代码输出正确，并且我有有效的 lat/lng 坐标。我正在使用下面的代码，任何人都可以提出关于发生了什么的任何想法？

<script type="text/javascript">
function initialize() {
    var mapOptions = {
        center: new google.maps.LatLng({lat}, {lng}),
        zoom: 16,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
}           
function loadScript()
{
    var script = document.createElement("script");
    script.type = "text/javascript";
    script.src = "http://maps.googleapis.com/maps/api/js?key={api_key}&sensor=false&callback=initialize";
    document.body.appendChild(script);
}
window.onload = loadScript;
</script>
<div id="map-canvas" class="map-canvas"></div>
4

3 回答 3

3

上面的整个代码片段是通过 ajax 调用加载的

当您通过ajax加载片段时，通常在响应到达时窗口已经加载，在这种情况下onload-事件已经被触发（并且不会再次触发，loadScript永远不会执行）

正如 geocodezip 所评论的那样，您的解决方案有效，因为loadScript将立即执行，但是当您想确保窗口已经加载时，请检查文档的 readyState-property：

if(document.readyState==='complete'){
  loadScript();
}else{
  window.onload = loadScript;
}
于 2013-11-10T03:17:50.153 回答
1

解决了它，在用于异步加载地图的 Google API 文档中，我使用了页面上的代码https://developers.google.com/maps/documentation/javascript/tutorial#asynch，问题是我正在使用：

window.onload = loadScript;

当我应该使用时：

window.onload = loadScript();
于 2013-11-10T01:55:33.013 回答
0

您需要提供API 密钥。

function loadScript()
{
    var script = document.createElement("script");
    script.type = "text/javascript";
    script.src = "http://maps.googleapis.com/maps/api/js?key=api_key&sensor=false&callback=initialize";
    script.src.replace('api_key', "3d73a8acf7ab7f466fb7c9da390df68c"); //  This is not a real api key
    document.body.appendChild(script);
}
于 2013-11-10T01:48:05.867 回答