谷歌地图信息窗口只显示第一次点击的信息

Question

我有一个脚本：

1. 以 XML 文件的形式从数据库中提取结果
2. 解析这些结果
3. 为每个结果创建一个标记并将其放置在地图上（所有标记的单个地图）
4. 同时，构建一个包含所有这些结果的可点击 HTML 列表（侧边栏）。

当用户点击侧边栏中的地名时，地图上相应标记的信息窗口会自动显示。当然用户也可以直接点击地图上的标记，同样的信息窗口也会显示出来。

这段代码已经运行了好几年了，但上周我注意到它的行为现在被窃听了。查看某些给定结果时，第一次点击（在地图上或边栏中）工作正常（信息窗口打开并显示正确的信息），但以下点击均显示来自第一次点击的相同信息，都在各自的信息窗口中。 （需要明确：显示的信息是第一次点击的信息，而不是前一次点击的信息。）

我已经尝试调试了好几个小时，但我不明白为什么它不再工作了。正如您在下面的代码中看到的那样，我尝试在google.maps.event.addListener 函数中添加console.log，以查看单击标记时正在处理哪些数据，但即使在那里，我也没有发现任何错误。

这是我的代码（简化为更具可读性）：

var side_bar_html = '\n';
var gmarkers = []; // array for created markers
var infoWindow;
var center_lat = <?php echo $position_lat; ?>;
var center_lng = <?php echo $position_lng; ?>;

function createMarker(point, name, html, place_id, map) {
    var marker, markerOptions;
    markerOptions = {
        map: map,
        position: point,
        dataId: place_id,
        icon  : 'theme/marker.png',
        shadow: 'theme/marker_shadow.png'
    };
    marker = new google.maps.Marker(markerOptions);

    infoWindow = new google.maps.InfoWindow({content: html});
    google.maps.event.addListener(marker, 'click', function() {
        console.log(this, marker, html);
        infoWindow.content = html;
        infoWindow.open(map, this);
    });

    gmarkers.push(marker);
    side_bar_html += '\n<li><a href="javascript:showPlace(' + (gmarkers.length-1) + ')" id="sr' + place_id + '">' + name + '</a></li>';
    return marker;
}

function showPlace(i) {
    google.maps.event.trigger(gmarkers[i], 'click');
}

function loadEarth(opt, zoom) {
    var map, point, mapCenter, mapOptions;
    if (zoom === null) {zoom = 7;}
    mapCenter = new google.maps.LatLng(center_lat, center_lng);
    mapOptions = {
        zoom: zoom,
        center: mapCenter,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    map   = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
    point = new google.maps.LatLng(parseFloat(center_lat), parseFloat(center_lng));
    if (opt != 0) {
        map.setMap(new google.maps.Marker(point));
    }
}

// receiving results via XML
function go() {
    var map, bounds;
    var mapOptions = {
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
    bounds = new google.maps.LatLngBounds();

    $.ajax({
        url : 'url/to/data.xml',
        type : 'GET',
        dataType : 'xml',
        success : function(xml) {
            var markers, lat, lng, place_id, point, label, html, marker;
            markers = xml.documentElement.getElementsByTagName("marker");
            for (var i = 0; i < markers.length; i++) {
                // extract data for each marker
                lat =     parseFloat(markers[i].getAttribute("lat"));
                lng =     parseFloat(markers[i].getAttribute("lng"));
                place_id = parseFloat(markers[i].getAttribute("place_id"));
                point = new google.maps.LatLng(lat,lng);
                label = $(markers[i]).find('label').eq(0).text();
                html  = $(markers[i]).find('infowindow').eq(0).text();

                // marker creation
                marker = createMarker(point, label, html, place_id, map);
                // extend visible zone to newly added marker
                bounds.extend(point);
            }
            map.setCenter(new google.maps.LatLng(center_lat, center_lng), 7);
            bounds.extend(point);
            if (markers.length>0) {
                document.getElementById("side_results").innerHTML = side_bar_html;
                map.fitBounds(bounds);
                map.setCenter(bounds.getCenter());
            } else {
                loadEarth();
            }
        } // end AJAX success
    }); // end AJAX
} // end go()

if ($('#places_page').is('.empty')) {
    loadEarth(0,8);
} else go();

任何帮助将不胜感激。

编辑：

根据要求，这里是收到的 XML 示例。在这种情况下，脚本开头的 PHP 变量将收到以下值：

$position_lat: 46.9479222
$position_lng: 7.4446085

<?xml version="1.0" encoding="UTF-8"?><markers>
<marker place_id="955" lat="46.950218" lng="7.442429">
    <label><![CDATA[<em>Place 955</em><strong>3011 Bern</strong>]]></label>
    <infowindow>
        <![CDATA[<p><em>Place 955</em><br />Speichergasse 35<br />3011 <ins>Bern</ins></p>]]>
    </infowindow>
</marker>
<marker place_id="985" lat="46.942032" lng="7.389993">
    <label><![CDATA[<em>Place 985</em><strong>3018 Bern</strong>]]></label>
    <infowindow>
        <![CDATA[<p><em>Place 985</em><br />Brünnenstrasse 106A<br />3018 <ins>Bern</ins></p>]]>
    </infowindow>
</marker>
</markers>

Google Maps API 包含在此行中：
<script src="http://maps.google.com/maps/api/js?v=3&sensor=true&language=fr&key=..."></script>

编辑 2：

更改 API 调用以强制其使用 3.18 版确实可以解决问题：
<script src="http://maps.google.com/maps/api/js?v=3.18&sensor=true&language=fr&key=..."></script>

显然这是一个临时修复，因为 v. 3.18 并不总是可用。现在我需要了解 3.19 版本的哪些变化导致了这个 bug 的出现。任何建议仍然受到赞赏。 :)

Answer 1

这种未记录的用法：

infoWindow.content = html;

可能是问题所在。应该是：

infoWindow.setContent(html);

.content 属性已消失或不再受支持issue