Google 地图信息窗口仅显示首次点击时的信息
Google Maps info windows only displays info from the first click
我有一个脚本:
- 以 XML 文件的形式从数据库中提取结果
- 解析这些结果
- 为每个结果创建一个标记并将其放置在地图上(所有标记的单个地图)
- 同时,构建一个包含所有这些结果的可点击 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 属性已消失或不再受支持的问题
- Jquery on单击“显示信息”
- 如何在完整日历中的当天点击时显示活动详细信息
- 如何在单击“提交”按钮时为“新建”窗口编写JavaScript,用“确定”和“取消”显示注册信息
- 谷歌地图-数据库中的标记只显示最后一行的信息
- 谷歌地图信息窗口为每个标记显示相同的内容
- Cartodb信息窗口未在地图上显示变量
- jquery Ajax没有;不要显示任何信息(既不显示成功也不显示失败)
- 地图标记信息不显示
- Json阵列的详细信息显示在三页的angularjs中
- 如何创建multiselect来显示Django中每个选定项的详细信息
- 如何在显示多个标记时单击另一个标记时关闭信息窗口
- 数据应该只显示与我单击的按钮有关的信息
- 谷歌地图API-信息窗口显示谷歌位置API信息
- 在knocket js中显示json对象的详细信息
- 在 AngularJS 中显示信息的标记存在问题
- Google 地图信息窗口仅显示首次点击时的信息
- jQuery基于下拉信息显示信息
- 使用谷歌地图过境信息显示旅行时间
- 根据用户信息显示不同的图像
- 点击里面的点击功能导致警告信息显示不止一次- Jquery/Javascript