加载脚本并仅在需要时执行

Question

我需要查找页面Code Pen Example中是否有class =“map”的div。

如果存在且仅在此情况下加载Google Maps API。

然后使用它将地图加载到使用lat和long值的数据属性的div中。

所以，我有以下几点：

<div class="map" data-long="51.5072" data-lat="0.1275"> 
    Replace by map 1 
</div> 

<div class="map" data-long="74.0059" data-lat="40.7127"> 
    Replace by map 2 
</div> 

我用类似考虑（这应该是只有在地图的div存在加载）：

$.getScript('https://www.google.com/jsapi', function() 
{ 
    google.load('maps', '3', { other_params: 'sensor=false', callback: function() 
    { 


    }}); 
}); 

的代码，我想申请每张地图都像Google Maps Code：

function initialize() { 
    var map_canvas = document.getElementById('map_canvas'); 
    var map_options = { 
     center: new google.maps.LatLng(44.5403, -78.5463), 
     zoom: 8, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    } 
    var map = new google.maps.Map(map_canvas, map_options) 
    } 
    google.maps.event.addDomListener(window, 'load', initialize); 
</script> 

谢谢， 米格尔

Answer 1

看到一个解决方案，用于加载谷歌地图API异步： https://stackoverflow.com/a/12602845/1491212

var gMapsLoaded = false; 
window.gMapsCallback = function(){ 
    gMapsLoaded = true; 
    $(window).trigger('gMapsLoaded'); 
} 
window.loadGoogleMaps = function(){ 
    if(gMapsLoaded) return window.gMapsCallback(); 
    var script_tag = document.createElement('script'); 
    script_tag.setAttribute("type","text/javascript"); 
    script_tag.setAttribute("src","http://maps.google.com/maps/api/js?sensor=false&callback=gMapsCallback"); 
    (document.getElementsByTagName("head")[0] || document.documentElement).appendChild(script_tag); 
} 

然后就做这样的事情： '地图'。

$(document).ready(function(){ 
    function initialize(){ 
     var map_canvas = document.getElementById('map_canvas'); 
     var map_options = { 
      center: new google.maps.LatLng(44.5403, -78.5463), 
      zoom: 8, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     } 
     var map = new google.maps.Map(map_canvas, map_options) 
    } 
    $(window).bind('gMapsLoaded', initialize); 

    if($('.map').length){ 
     window.loadGoogleMaps(); 
    } 
});