重用已加载的JavaScript 目标

重用已正确加载的JavaScript

问题 我正在使用GoogleMapsAPIv3动态生成地图，我需要重用它怎么做？

情景 在Index.html上，有以下脚本：

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);
}

当我单击某个按钮以显示地图时，我的应用程序将调用以下脚本：

[...]

var geocoder;
var map;
var address = context.address();

function initialize() {
    var mapDiv = document.getElementById("map_canvas");
    geocoder = new google.maps.Geocoder();
    var latlng = new google.maps.LatLng(-34.397, 150.644);
    var myOptions = {
        zoom: 15,
        center: latlng,
        mapTypeControl: true,
        mapTypeControlOptions: 
           { style: google.maps.MapTypeControlStyle.DROPDOWN_MENU },
        navigationControl: true,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    map = new google.maps.Map(mapDiv, myOptions);

    if (geocoder) {
        geocoder.geocode({ 'address': address }, function (results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                if (status != google.maps.GeocoderStatus.ZERO_RESULTS) {
                    map.setCenter(results[0].geometry.location);

                    var infowindow = new google.maps.InfoWindow(
                        {
                            content: '<b>' + address + '</b>',
                            size: new google.maps.Size(150, 50)
                        });

                    var marker = new google.maps.Marker({
                        position: results[0].geometry.location,
                        map: map,
                        title: address
                    });

                    google.maps.event.addListener(marker, 'click', function () {
                        infowindow.open(map, marker);
                    });

                } else {
                    alert("No results found");
                }
            } else {
                alert
                    ("Geocode was not successful 
                     for the following reason: " + status);
            }
        });
    }

    gMapsLoaded = false;
}

$(window).on('gMapsLoaded', initialize);
window.loadGoogleMaps();

[…]
var地理编码器；
var映射；
var address=context.address（）；
函数初始化（）{
var mapDiv=document.getElementById（“映射画布”）；
geocoder=新的google.maps.geocoder（）；
var latlng=新的google.maps.latlng（-34.397150.644）；
变量myOptions={
缩放：15，
中心：拉特林，
mapTypeControl:true，
mapTypeControlOptions：
{style:google.maps.MapTypeControlStyle.DROPDOWN_MENU}，
导航控制：对，
mapTypeId:google.maps.mapTypeId.ROADMAP
};
map=新的google.maps.map（mapDiv，myOptions）；
if（地理编码器）{
geocoder.geocode（{'address'：address}，函数（结果，状态）{
if（status==google.maps.GeocoderStatus.OK）{
if（status！=google.maps.GeocoderStatus.ZERO\u结果）{
map.setCenter（结果[0].geometry.location）；
var infowindow=new google.maps.infowindow(
{
内容：''+地址+''，
尺寸：新谷歌。地图。尺寸（150，50）
});
var marker=new google.maps.marker({
位置：结果[0]。geometry.location，
地图：地图，
标题：地址
});
google.maps.event.addListener（标记，'click'，函数（）{
信息窗口。打开（地图、标记）；
});
}否则{
警报（“未发现结果”）；
}
}否则{
警觉的
（“地理编码没有成功
原因如下：“+状态）；
}
});
}
gmapsload=false；
}
$（窗口）.on（'gmapsload'，初始化）；
loadGoogleMaps（）；

如您所见，应用程序总是调用

loadGoogleMaps（）.js

文件的code>函数。如果我点击5个不同的地图，我会得到5个相同提案的脚本

有人有办法解决这个问题吗？

重复问题？ 是的，我认为问题的本质是重复的，但核心不是

如您所见，应用程序总是调用 加载谷歌地图（）；调用外部.js文件的函数。如果我 点击5个不同的地图，我得到了5个脚本与相同的建议

这是不正确的。在第一次完全加载后，第一行上的if语句将提前返回，防止您多次包含它

写的方式没有问题

现在，如果您在尚未加载的情况下快速单击它5次，它可能会多次加载。您应该在单击事件正常发生之前自行调用该函数，以防止出现这种情况

---

更新：

---

在

initialize（）

方法的末尾，您使用的是

gmapsload=false

这会导致上述代码再次请求新的脚本标记。只需删除/注释该行。

我不能在单击事件之前调用该函数，因为单击触发器使用的方法无法识别Google Maps Api传递的方法。与您所说的相反，即使我等待60秒，应用程序也会再次调用脚本。一定发生了与您发布的代码无关的事情，一切都正常工作。它只加载一次脚本，随后单击按钮只需执行加载的回调。如果我不设置

gmapsload=false，它就工作了

位于

initialize（）

方法的底部。如果执行

gmapsload=false它将始终请求另一个脚本。要么不这样做，要么接受它请求另一个脚本。我不明白这与每次渲染贴图有什么关系。如果要重新渲染贴图，请重新渲染贴图。这不需要再次包含整个库。如果显示initialize（）的代码，您可能会在那里重新分派…完成，@dandavis。代码是post.hmmm，加载5次的脚本文件的名称是什么？如果是同一个文件，则应将其缓存，而不是浪费带宽，但如果可能，最好避免……问题是：
gmapsload=false不要这样做。另外，只需调用函数，而不是使用事件名称与布尔值相同的触发器，这与所有getout一样容易混淆。。。
var gMapsLoaded = false;

window.gMapsCallback = function () {
    gMapsLoaded = true;
    $(window).trigger('gMapsLoaded');
}

window.loadGoogleMaps = function () {
    if (gMapsLoaded) return window.gMapsCallback();
    console.log('Generating new script tag');
    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);
}

$(window).on("gMapsLoaded",function(){
    console.log("gMapsLoaded");
});
$(function(){
    $("button").on("click",window.loadGoogleMaps);
});