异步加载google map v3的问题

问题描述

| 我当前用于加载Google地图脚本的解决方案是一种过时的方式。

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

但这需要花费很长时间，并且渲染内容会延迟。然后，我查看了Google Map文档，发现了如何异步加载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,new google.maps.Size(32,32));    
    bounds            = new google.maps.LatLngBounds();  
}

我的脚本在new google.maps.LatLng(lat,lng);处失败，这是因为尚未运行initGoogleMap()。 script.src中的回调似乎无效-因为我的警报从未触发。或可能是因为未按正确的顺序整理内容，但仍然应该触发警报。有人对此有经验吗？

解决方法

我有同样的问题，并这样解决：问题是您无法从jQuery外部访问jQuery对象本身。最后的API回调属性只能访问全局javascript。阅读opn javascript名称空间以更好地理解。我的解决方案是在$ document.ready（function（）{...

var global = {};

接下来，您将jQuery块内的init函数作为变量写入地图，并将其附加到全局对象：

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

现在，您可以像这样在url查询字符串中将jquery函数作为全局变量引用：

...&callback=global.initMap

这对我有用。 , 蒂姆的建议很好！这与基于jQuery的Google Maps插件异步（延迟加载）google maps v3脚本。这样，除了head.js + jquery.js之外，没有脚本会阻止该页面，并且google地图会尽快开始加载。 window.load应尽快进入。在ffox 12，ie7,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

, 这是因为您正在尝试初始化您无权访问的对象。尝试将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,new google.maps.Size(32,32));    
        bounds            = new google.maps.LatLngBounds();  
    }

    googleMaploadScript();
    someFunction();
});

, 我认为发生的事情是，您实际上在加载地图之前触发了“ somefunction”，因此JS失败了，并且从不实际执行“ initGoogleMap”。将您的一些函数放在initGoogleMap的末尾，如下所示：

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

ķ , 您可以在加载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});

map map 加载加载异步问题问题

异步加载google map v3的问题

问题描述

解决方法

相关问答