Google 地图信息窗口仅显示首次点击时的信息

Google Maps info windows only displays info from the first click

本文关键字:信息 显示 地图 信息窗 窗口 Google      更新时间:2023-09-26

我有一个脚本:

  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 版本中的哪些更改使此错误出现。任何建议仍然不胜感激。:)

这种未记录的用法:

infoWindow.content = html;

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

infoWindow.setContent(html);

.content 属性已消失或不再受支持的问题