php - 异步加载 google map v3 的问题

Question

我当前加载 Google map 脚本的解决方案是老式方法。

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>

但这需要很长时间并且渲染内容会延迟。然后我看了Google Map Documentation并发现如何异步加载 Goole Map javascript。

所以我在我已经使用的 JavaScript 中测试了这一点。这只是我的脚本的片段。

jQuery(document).ready(function() {
  googleMaploadScript();
  someFunction();
}

// Script for loading googlemap with callback to initialize Google map
function googleMaploadScript() {
  var script = document.createElement("script");
  script.type = "text/javascript";
  script.src = "http://maps.google.com/maps/api/js?sensor=true&callback=initGoogleMap";
  document.body.appendChild(script);
}

// Some function that calls populateGeoMap()
function someFunction() {
(...)
populateGeoMap(); 
}

// Script for populating google map with locations
function populateGeoMap() {
  // This is where I initialized google map each time I load the page using google map
  // But since I'm using a callback, I've commented this out.
  //initGoogleMap(); 
  var lat = '12.142123';
  var lng = '54.524522';
  latLng  = new google.maps.LatLng(lat,lng); <-- THIS FAILS
}

// Google map init
function initGoogleMap() {
    alert('test'); <-- THIS ALERT IS NEVER TRIGGERED

    options           = {zoom: 13, mapTypeId: google.maps.MapTypeId.ROADMAP }    
    map               = new google.maps.Map(document.getElementById("map_canvas"), options);
    geocoder          = new google.maps.Geocoder();
    icon              = new google.maps.MarkerImage("http://mysite.com/img/pin_red.png", null, null, null, new google.maps.Size(32, 32));    
    bounds            = new google.maps.LatLngBounds();  
}

我的脚本在 new google.maps.LatLng(lat,lng); 处失败，这是因为 initGoogleMap() 尚未运行。

似乎 script.src 中的回调不起作用 - 因为我的警报从未被触发。或者可能是因为事情没有按正确的顺序加载，但警报仍然应该被触发。

有人有这方面的经验吗？

Answer 1

我也遇到了同样的问题，解决方法如下:

问题在于您无法从 jQuery 外部访问 jQuery 对象本身。

最后的API回调属性只能访问全局javascript。阅读 opn javascript namespace 以更好地理解。

我的解决方案是在 $document.ready(function(){...

之外设置一个全局对象

var global = {};

接下来，您在 map 的 jQuery block 中编写 init 函数作为变量并将其附加到全局对象:

global.initMap = function(){ ...}

现在您可以将 jquery 函数作为全局变量在 url 查询字符串中引用，如下所示:

...&callback=global.initMap

这对我有用。