Question

我目前用于加载Google地图脚本的解决方案是旧时尚方式。

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

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

所以我在我已经使用的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 命名空间以便更好地理解。

我的解决方案是在$ document.ready（function（）{...

之外设置一个全局对象
var global = {};

接下来，在jQuery块中编写init函数，将地图作为变量，并将其附加到全局对象：

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

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

...&callback=global.initMap

这对我有用。

Answer 2

蒂姆的建议很棒！

这是使用基于jQuery的谷歌地图插件的谷歌地图v3脚本异步（延迟加载）。

这样，除了head.js + jquery.js之外，没有脚本会阻止页面，谷歌地图会尽快开始加载。应该快速访问window.load。在ffox 12上测试，即7,8,9和chrome 18。

由于ie7,8的一些问题，无法异步加载jquery.js：/

//////////////////// lazy loaded google map
// load head.js normally before this code.
// due to IE7,8 or head.js bug you HAVE TO load normally jQuery too:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 
<script src="/PATH/head.js"></script> 
// load rest of your javascript using head.js function
head.js("yourscripts.js");

// IMPORTANT: google map plugin must be tagged like this:
head.js({gmap:"YOUR_PATHs/jquery.mapka.v3-rc.js"}); 



var global = {};

global.googlemaps_init = function(){  

   head.ready("gmap", function() {

     // jquery-ui-map v3 init of google maps (place YOUR jQuery based google maps plugin init here)
     $('#map_canvas').gmap({ 'center': '42.345573,-71.098326' });

    }); // head.gmap.ready END
} // global.googlemaps_init END


function loadGmapScript() {
  var global = {};
  var script = document.createElement("script");
  script.type = "text/javascript";
  script.src = "http://maps.googleapis.com/maps/api/js?&sensor=false&callback=global.googlemaps_init";
  document.body.appendChild(script);
}
window.onload = loadGmapScript;

//////////////////// lazy loaded google map END

Answer 3

这是因为您正在尝试初始化您无权访问的对象。尝试将GA功能移动到document.onready块：

$(function(){
    // 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();  
    }

    googleMaploadScript();
    someFunction();
});

Answer 4

我认为发生的事情是你在加载地图之前实际触发“某种功能”，因此JS失败并且从未实际执行“initGoogleMap”。

将您的某些功能放在initGoogleMap的末尾，如下所示：

google.maps.event.addListener(map, 'loaded', function(){
 somefunction();
});

ķ

Answer 5

您可以在加载Google Maps API时使用异步模式，您需要提供回调函数：

http://maps.googleapis.com/maps/api/js?sensor=true&callback=my_callback_function

在这里http://lucamanzo-soluzione-software.it/wp/?p=5你可以找到一个简单的jquery插件，显示使用异步加载和jquery的所有步骤，以及只用几行代码构建一个地图。用法示例：

$.gmapstools.init();
$("#my_map_canvas").gmap({lat:37.4221913, lng:-122.08458530000001, draw_marker:true, zoom_level:13});

异步加载谷歌地图v3的问题

5 个答案: