Google 映射标记数组，为每个标记输出相同的信息 window 内容

Question

我有一个地图标记数组，它是使用数据库中的数据构建的，该数组构建得非常完美，但是当我尝试遍历数组对象时，尽管确实出现了标记，并且以正确的数字显示了内容位于信息 windows 中的是相同的，而且我设置为输出的 ID 也是相同的，它似乎总是转到最后一个对象并为每个标记使用该数据。

有人能指出我可能做错了什么吗？

下面的脚本完整是数据库获取信息成功时调用的函数。所以这整个块专门用于显示从数据库中检索到的标记及其相关信息。

function querySuccessMarkers(t, results) {
    var markersArray = {};
    var len = results.rows.length;
    console.log("Markers table: " + len + " rows found");

    for( var i = 0, c = results.rows.length; i < c; i++ ) {
        markersArray[results.rows.item(i).markerid] = {
            id: results.rows.item(i).markerid,
            title: results.rows.item(i).title,
            info: results.rows.item(i).info,
            lat: results.rows.item(i).markerLat,
            lng: results.rows.item(i).markerLng
        };
    }
    console.log(markersArray);

    var markerDetails;
    for (id in markersArray) {
        if( markersArray.hasOwnProperty(id) ) {
            markerDetails = markersArray[id];
            var bridgeIcon = new google.maps.MarkerImage("img/map_markers/warning_map_marker.png", null, null, null);
            marker = new google.maps.Marker({
                position: new google.maps.LatLng(markerDetails.lat, markerDetails.lng),
                map: map,
                icon: bridgeIcon
            });
            var info_window = new google.maps.InfoWindow({content: ''});
                info_window.content = '<div id="marker-info-win" data-id="'+markerDetails.id+'">' +
                '<h3>Marker Information</h3>' +
                '<input id="warning-title" data-text="Warning Title" />'+
                '<p>'+markerDetails.title+'</p>'+
                '<i class="fa fa-pencil"></i>' +
                '<input id="warning-additional-info" data-text="Warning Additional Information" value="'+markerDetails.info+'"/>'+
                '<i class="fa fa-pencil"></i>';
                google.maps.event.addListener(marker, 'click', function() {
                    info_window.open(map, this);
                });
            console.log(markerDetails);
        }
    }
}

Answer 1

任何感兴趣的人的固定代码：

function querySuccessMarkers(t, results) {
        var markersArray = [];
        var len = results.rows.length;
        console.log("Markers table: " + len + " rows found");

        for( var i = 0, c = results.rows.length; i < c; i++) {
            markersArray.push(results.rows.item(i));
        }
        console.log(markersArray);


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

        for (i = 0; i < markersArray.length; i++) {
                var bridgeIcon = new google.maps.MarkerImage("img/map_markers/warning_map_marker.png", null, null, null);
                marker = new google.maps.Marker({
                    position: new google.maps.LatLng(markersArray[i].markerLat, markersArray[i].markerLng),
                    map: map,
                    icon: bridgeIcon
                });

                console.log(marker);


            google.maps.event.addListener(marker, 'click', (function(marker, i) {
                return function() {
                    info_window.setContent('<div id="marker-info-win" data-id="'+markersArray[i].markerid+'">' +
                '<h3>Marker Information</h3>' +
                '<input id="warning-title" data-text="Warning Title" />'+
                '<p>'+markersArray[i].title+'</p>'+
                '<i class="fa fa-pencil"></i>' +
                '<input id="warning-additional-info" data-text="Warning Additional Information" value="'+markersArray[i].info+'"/>'+
                '<i class="fa fa-pencil"></i>');
                    info_window.open(map, marker);
                }
            })(marker, i));
        }
    }

这是从 WebSQL 数据库输出到普通数组而不是我自己的数组对象的组合结果。此外，在每个标记的点击事件监听器中添加闭包。

有关如何使用硬编码数组或动态实现相同目的的更深入的教程和指南：http://chrisltd.com/blog/2013/08/google-map-random-color-pins/

Google 映射标记数组，为每个标记输出相同的信息 window 内容

Google maps marker array outputting the same info window content for each marker

javascript

google-maps

google-maps-api-3

google-maps-markers

web-sql