Question

＆＃13;

$(document).on("click", "#searchRankingLocation", function() {
    map = new google.maps.Map(document.getElementById('map'), {
        center: {
            lat: 37.402040,
            lng: 127.107296
        }, //usepace
        zoom: 7
    });
    for (var i = 0; i < locationList.length; i++) {
        markers[i] = new google.maps.Marker({
            map: map,
            draggable: true,
            animation: google.maps.Animation.DROP,
            position: locationList[i],
            title: rankingInfoList[i].name
        });
        infoList[i] = 'this area will changed.'

        windowNames[i] = new google.maps.InfoWindow({
            content: infoList[i]
        });
        google.maps.event.addListener(markers[i], 'click', function() {
            windowNames[i].open(map, markers[i]);
        });

    }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>

＆＃13;

这是我的来源。
我无法向你展示窗户，我试图找到很多解决方案，但他们没有帮助我！

Answer 1

在原始代码中，var i实际上使i变量的范围在循环之外，因此当click事件发生时，我将locationList.length - 显然{{1}将是未定义的

克服这种情况的3种方法

使用函数（我在此代码中称之为windowNames[i]）

doInfo

在这种情况下，函数接收当前标记/ windowName，因此$(document).on("click", "#searchRankingLocation", function() { map = new google.maps.Map(document.getElementById('map'), { center: { lat: 37.402040, lng: 127.107296 }, //usepace zoom: 7 }); function doInfo(marker, windowName) { google.maps.event.addListener(marker, 'click', function() { windowName.open(map, marker); }); } for (var i = 0; i < locationList.length; i++) { markers[i] = new google.maps.Marker({ map: map, draggable: true, animation: google.maps.Animation.DROP, position: locationList[i], title: rankingInfoList[i].name }); infoList[i] = 'this area will changed.' windowNames[i] = new google.maps.InfoWindow({ content: infoList[i] }); doInfo(markers[i], windowNames[i]); } });的值现在无关紧要

使用IIFE（立即调用函数表达式）

这与第一种情况非常相似，只是函数是＆＃34; inline＆＃34;因此可以被一些人认为更具可读性 - $(document).on("click", "#searchRankingLocation", function() { map = new google.maps.Map(document.getElementById('map'), { center: { lat: 37.402040, lng: 127.107296 }, //usepace zoom: 7 }); for (var i = 0; i < locationList.length; i++) { markers[i] = new google.maps.Marker({ map: map, draggable: true, animation: google.maps.Animation.DROP, position: locationList[i], title: rankingInfoList[i].name }); infoList[i] = 'this area will changed.' windowNames[i] = new google.maps.InfoWindow({ content: infoList[i] }); (function(x) { // the IIFE google.maps.event.addListener(markers[x], 'click', function() { windowNames[x].open(map, markers[x]); }); })(i); //pass in the current value of i, used as x in the body of the IIFE } });是＆＃34;捕获＆＃34;每次迭代的x值 - 或者你也可以

所以，你可以看到这与第一个答案几乎相同

使用ES2015 (function(marker, windowName) { // the IIFE google.maps.event.addListener(marker, 'click', function() { windowName.open(map, marker); }); })(markers[i], windowNames[i]); - 这只能在现代浏览器中使用（不进行转换）（所以，请忘记Internet Explorer）

let

$(document).on("click", "#searchRankingLocation", function() { map = new google.maps.Map(document.getElementById('map'), { center: { lat: 37.402040, lng: 127.107296 }, //usepace zoom: 7 }); for (let i = 0; i < locationList.length; i++) { markers[i] = new google.maps.Marker({ map: map, draggable: true, animation: google.maps.Animation.DROP, position: locationList[i], title: rankingInfoList[i].name }); infoList[i] = 'this area will changed.' windowNames[i] = new google.maps.InfoWindow({ content: infoList[i] }); google.maps.event.addListener(markers[i], 'click', function() { windowNames[i].open(map, markers[i]); }); } });表示循环的每次迭代，let i的值都是＆＃34;捕获＆＃34;对于那次迭代

再次，这也可以这样做：

因此，您可以看到所有方法在最终结果中都是相同的

谷歌地图无法阅读财产＆＃39;打开＆＃39;未定义的

1 个答案: