Javascript 谷歌地图API，自定义标记问题（标题中不能真正解释）

因此，我为一些自定义标记编写了以下Javascript代码：

window.addEventListener('load', initialise)

//Initialises the map view
function initialise() {
    var mapOptions = {
        center: new google.maps.LatLng(53.4113594, -2.1571162),
        zoom: 14,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    //Creates the actual Map object
    var map = new google.maps.Map(document.getElementById("mapArea"), mapOptions);


    setMarkers(map, myLocations);
}
var myLocations = [
    ['Stockport Town Hall', 'This is the town hall. Where things... happen.', 'townhall.jpg', 53.406, -2.158215, 'images/markers/townhall.png'],
    ['Stockport Town Centre', 'This is the centre of town. Where there are shops. And food. and... stuff', 'stockportcentre.jpg', 53.4175146, -2.1490619,
        'images/markers/shopping.png'
    ],
    ['Stockport College', 'This is Stockport college. Where learning happens.', 'stockportcollege.jpg', 53.4040427, -2.1587963, 'images/markers/Learning.png'],
    ['Stockport Train station', 'This is the train station. Where you catch trains.', 'stockporttrainstation.jpg', 53.4056234, -2.1637525, 'images/markers/train.png']

];



function setMarkers(map, myLocations) {
    for (var i in myLocations) {
        var name = myLocations[i][0];
        var info = myLocations[i][1];
        var image = myLocations[i][2];
        var lat = myLocations[i][3];
        var lng = myLocations[i][4];
        var indivIcon = myLocations[i][5];
        var latlngset;
        latlngset = new google.maps.LatLng(lat, lng);

        var marker = new google.maps.Marker({
            map: map,
            title: name,
            position: latlngset,
            icon: indivIcon
        });


        //content here!

        var infoContent = '<h3>' + name + '</h3>' + info +
            '<br /><img width = "128" height = "128" src = "images/' + image + ' " ' + '</div>';



        var infowindow = new google.maps.InfoWindow();

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

    }
}

window.addEventListener（'load'，初始化）
//初始化地图视图
函数初始化（）{
变量映射选项={
中心：新google.maps.LatLng（53.4113594，-2.1571162），
缩放：14，
mapTypeId:google.maps.mapTypeId.ROADMAP
};
//创建实际的贴图对象
var map=new google.maps.map（document.getElementById（“mapArea”）、mapOptions）；
设置标记（地图、我的位置）；
}
变量myLocations=[
[Stockport市政厅”，“这是市政厅。事情发生的地方”，“townhall.jpg”，53.406，-2.158215，“images/markers/townhall.png”，
这里是市中心，那里有商店、食物和…东西，stockportcentre.jpg，53.4175146，-2.1490619，
'images/markers/shopping.png'
],
[Stockport学院”，“这是Stockport学院，学习发生的地方”，“Stockport学院.jpg”，53.4040427，-2.1587963，“images/markers/learning.png”，
['Stockport火车站'，'Stockport火车站.jpg'，53.4056234，-2.1637525，'images/markers/Train.png']
];
功能设置标记（映射、myLocations）{
用于（myLocations中的var i）{
var name=myLocations[i][0]；
var info=myLocations[i][1]；
var image=myLocations[i][2]；
var lat=myLocations[i][3]；
var lng=我的位置[i][4]；
var individicon=myLocations[i][5]；
var latlngset；
latlngset=new google.maps.LatLng（lat，lng）；
var marker=new google.maps.marker({
地图：地图，
标题：姓名，
位置：latlngset，
图标：IndividCon
});
//内容在这里！
var infoContent=''+name+''+info+
“
”；
var infowindow=new google.maps.infowindow（）；
google.maps.event.addListener(
标记“单击”，
函数（）{
setContent（infoContent）；
打开（地图，这个）；
});
}
}

---

现在，标记器工作得很好。我可以打开它们，它们自动关闭并转到其他标记，但奇怪的是：信息窗口都显示“斯托克波特火车站”信息，我不知道为什么。我做错了什么？

那么发生的就是这个。你在所有位置上循环，为每个位置创建一个标记，这很好。对于每个标记，您将创建一个事件侦听器，只有在单击标记时才会调用它

在该循环中，您基本上是对每个标记执行此操作，每次更新

infoContent

变量的值：

var infoContent = "...";

因此，在循环结束时，infoContent将等于您为最后一个标记设置的值，如

'<h3>Stockport Train station</h3> etc...'

因此，它可以正确地打开当前标记。它将信息窗口的内容设置为

infoContent

是什么。。。i、 e.始终是在循环结束时给它的值

相反，请尝试将内容设置为标记上的属性，然后使用该属性：

    var infoContent = '<h3>' + name + '</h3>' + info +
        '<br /><img width = "128" height = "128" src = "images/' + image + ' " ' + '</div>';

    var marker = new google.maps.Marker({
        map: map,
        title: name,
        position: latlngset,
        icon: indivIcon,
        content: infoContent 
    });

    var infoContent = '<h3>' + name + '</h3>' + info +
        '<br /><img width = "128" height = "128" src = "images/' + image + ' " ' + '</div>';

    var marker = new google.maps.Marker({
        map: map,
        title: name,
        position: latlngset,
        icon: indivIcon,
        content: infoContent 
    });

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