Javascript 显示相同信息的谷歌地图信息窗口
我的网站上有谷歌地图,显示了英国各地的位置列表。 但是“信息”窗口为每个单独的记录显示相同的记录。我的代码在下面。有什么原因吗Javascript 显示相同信息的谷歌地图信息窗口,javascript,arrays,google-maps,google-maps-api-3,google-maps-markers,Javascript,Arrays,Google Maps,Google Maps Api 3,Google Maps Markers,我的网站上有谷歌地图,显示了英国各地的位置列表。 但是“信息”窗口为每个单独的记录显示相同的记录。我的代码在下面。有什么原因吗 var locations = [[52.478899, -1.894055, 'test 1', '87', 'Name: test 1'], [52.479474, -1.895946, 'test 2', '88', 'Name: test 2 '], [52.477082, -1.893929, 'test 3', '89', 'Name: test 3 ']]
var locations = [[52.478899, -1.894055, 'test 1', '87', 'Name: test 1'],
[52.479474, -1.895946, 'test 2', '88', 'Name: test 2 '],
[52.477082, -1.893929, 'test 3', '89', 'Name: test 3 ']];
function initialize() {
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(52.528680, -1.839480),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var bounds = new google.maps.LatLngBounds();
for (var i = 0; i < locations.length; i++) {
var curLoc = locations[i];
myLatLng = new google.maps.LatLng(curLoc[0], curLoc[1]);
var beachMarker = new google.maps.Marker({
position: myLatLng,
map: map,
title: curLoc[2],
data: curLoc[4], //add content to the Marker-object
zIndex: 50 - i
});
var infowindow = new google.maps.InfoWindow({
content: curLoc[4]
});
google.maps.event.addListener(beachMarker, 'click', (function() {
infowindow.setContent(beachMarker.data);
infowindow.setPosition(beachMarker.position);
infowindow.open(map);
}));
bounds.extend(myLatLng);
map.fitBounds(bounds);
}
}
google.maps.event.addDomListener(window, 'load', initialize);
var位置=[[52.478899,-1.894055,'测试1','87','名称:测试1'],
[52.479474,-1.895946,'测试2','88','名称:测试2'],
[52.477082,-1.893929,'测试3','89','名称:测试3'];
函数初始化(){
变量映射选项={
缩放:8,
中心:新google.maps.LatLng(52.528680,-1.839480),
mapTypeId:google.maps.mapTypeId.ROADMAP
};
var map=new google.maps.map(document.getElementById('map-canvas'),mapOptions);
var bounds=new google.maps.LatLngBounds();
对于(变量i=0;i
更新:我更改了代码,但问题仍然存在,但现在单击标记将重点放在最后一个标记上,而不仅仅是显示最后一个标记文本
这是一个示例url我想它总是显示最后一条记录的数据?例如infowindow.setContent(curLoc[4]);curLoc始终是数据集位置的最后一个 试试这个
var beachMarker = new google.maps.Marker({
position: myLatLng,
map: map,
title: curLoc[2],
data : curLoc[4], //add content to the Marker-object
icon: image,
zIndex: 50 - i,
childMinderId: curLoc[3]
});
我猜它总是显示最后一条记录的数据?例如infowindow.setContent(curLoc[4]);curLoc始终是数据集位置的最后一个 试试这个
var beachMarker = new google.maps.Marker({
position: myLatLng,
map: map,
title: curLoc[2],
data : curLoc[4], //add content to the Marker-object
icon: image,
zIndex: 50 - i,
childMinderId: curLoc[3]
});
在这些情况下,我使用的解决方法是在创建标记时为标记分配一个id。此id将在回调中可用,因此您可以使用它按需获取HTML内容。以下是如何:
var locations = [
[52.478899, -1.894055, 'test 1', '87', 'Name: test 1'],
[52.479474, -1.895946, 'test 2', '88', 'Name: test 2'],
[52.477082, -1.893929, 'test 3', '89', 'Name: test 3']
];
var map = new google.maps.Map(document.getElementById("map_div"), {
center: new google.maps.LatLng(52.528680, -1.839480),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infoWindow = new google.maps.InfoWindow(); // 2: infoWindow is global
var markerClickHandler = function () {
infoWindow.setContent(locations[this.dataId][4]); // 3: use dataId stored in marker to fetch content from locations array
infoWindow.open(map, this);
};
var bounds = new google.maps.LatLngBounds();
var i;
for (i = 0; i < locations.length; i++) {
var latlng = new google.maps.LatLng(locations[i][0], locations[i][1]);
var marker = new google.maps.Marker({
position: latlng,
map: map,
title: locations[i][2],
dataId: i // 1: assign an id
});
bounds.extend(latlng);
google.maps.event.addListener(marker, "click", markerClickHandler);
}
map.fitBounds(bounds);
var位置=[
[52.478899,-1.894055,'测试1','87','名称:测试1'],
[52.479474,-1.895946,'测试2','88','名称:测试2'],
[52.477082,-1.893929,'测试3','89','名称:测试3']
];
var map=new google.maps.map(document.getElementById(“map_div”){
中心:新google.maps.LatLng(52.528680,-1.839480),
缩放:8,
mapTypeId:google.maps.mapTypeId.ROADMAP
});
var infoWindow=new google.maps.infoWindow();//2:infoWindow是全局的
var markerClickHandler=函数(){
infoWindow.setContent(locations[this.dataId][4]);//3:使用存储在marker中的dataId从locations数组中获取内容
打开(地图,这个);
};
var bounds=new google.maps.LatLngBounds();
var i;
对于(i=0;i
。请注意,也可以将文本/HTML存储到标记中,而不是将id存储到标记中。在这些情况下,我使用的解决方法是在创建标记时将id分配给标记。此id将在回调中可用,因此您可以使用它按需获取HTML内容。以下是如何:
var locations = [
[52.478899, -1.894055, 'test 1', '87', 'Name: test 1'],
[52.479474, -1.895946, 'test 2', '88', 'Name: test 2'],
[52.477082, -1.893929, 'test 3', '89', 'Name: test 3']
];
var map = new google.maps.Map(document.getElementById("map_div"), {
center: new google.maps.LatLng(52.528680, -1.839480),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infoWindow = new google.maps.InfoWindow(); // 2: infoWindow is global
var markerClickHandler = function () {
infoWindow.setContent(locations[this.dataId][4]); // 3: use dataId stored in marker to fetch content from locations array
infoWindow.open(map, this);
};
var bounds = new google.maps.LatLngBounds();
var i;
for (i = 0; i < locations.length; i++) {
var latlng = new google.maps.LatLng(locations[i][0], locations[i][1]);
var marker = new google.maps.Marker({
position: latlng,
map: map,
title: locations[i][2],
dataId: i // 1: assign an id
});
bounds.extend(latlng);
google.maps.event.addListener(marker, "click", markerClickHandler);
}
map.fitBounds(bounds);
var位置=[
[52.478899,-1.894055,'测试1','87','名称:测试1'],
[52.479474,-1.895946,'测试2','88','名称:测试2'],
[52.477082,-1.893929,'测试3','89','名称:测试3']
];
var map=new google.maps.map(document.getElementById(“map_div”){
中心:新google.maps.LatLng(52.528680,-1.839480),
缩放:8,
mapTypeId:google.maps.mapTypeId.ROADMAP
});
var infoWindow=new google.maps.infoWindow();//2:infoWindow是全局的
var markerClickHandler=函数(){
infoWindow.setContent(locations[this.dataId][4]);//3:使用存储在marker中的dataId从locations数组中获取内容
打开(地图,这个);
};
var bounds=new google.maps.LatLngBounds();
var i;
对于(i=0;i
。请注意,也可以将文本/HTML存储到标记中,而不是id。只是davidkonrad响应的补充。上次数据弹出时也有同样的问题。如果使用标记上的数据并使用“this”,它将拾取标记上的数据及其标记对象的位置
google.maps.event.addListener(beachMarker, 'click', (function () {
infowindow.setContent(this.data);
infowindow.open(map,this);
}
只是davidkonrad回复的附录。上次数据弹出时也有同样的问题。如果使用标记上的数据并使用“this”,它将拾取标记上的数据及其标记对象的位置
google.maps.event.addListener(beachMarker, 'click', (function () {
infowindow.setContent(this.data);
infowindow.open(map,this);
}
我已经做了这些改变,但现在我遇到了另一个问题。当我点击地图上的一个图标时,它会重新定位到地图上的最后一条记录,并显示该记录的信息窗口。例如,我点击tom,但地图聚焦于sharon并显示她的窗口。以前焦点是您单击的图标,但在信息窗口中显示相同的数据。我做了这些更改,但现在我遇到了另一个问题。当我点击地图上的一个图标时,它会重新定位到地图上的最后一条记录,并显示该记录的信息窗口。例如,我点击tom,但地图聚焦于sharon并显示她的窗口。在焦点是你想要的图标之前