Sve*_*ven -1 javascript google-maps infowindow google-maps-api-3 google-maps-markers
我正在尝试制作一个带有多个标记的地图,每个标记都有一个infowindow.到目前为止没什么好看的.
所有的信息都应该打开.没问题.
如果我点击,每个信息都会关闭
在它自己的标记上
在它的infowindow的X.
后者也没问题.
但是,如果我点击标记,它的表现就不应该.
页面已加载.infowindows是开放的.现在我单击Marker 1并关闭Marker 2的infowindow.如果我再次点击Marker 1,Marker 1上会打开第二个infowindow.Marker 1上的"初始"infowindow只能用infowindow中的X关闭.
如果我通过X关闭所有infowindows然后我可以通过他们的标记打开和关闭每个infowindow.但是:打开的infowindows将被点击另一个标记关闭,这不是我想要的.只需单击自己的标记即可打开和关闭信息窗.
这是我的代码:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Circles</title>
<style>
html, body {
height: 100%;
margin: 0px;
padding: 0px
}
#map-canvas {
height: 500px;
width:800px;
margin: 0px;
padding: 0px
}
</style>
<script>
function initialize() {
var infos = [];
var locations = [
['Marker 1', 54.08655, 13.39234, 2],
['Marker 2', 53.56783, 13.27793, 1]
];
var map = new google.maps.Map(document.getElementById('map-canvas'), {
mapTypeId: google.maps.MapTypeId.ROADMAP,
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL
}
});
var bounds = new google.maps.LatLngBounds();
for (i = 0; i < locations.length; i++) {
var marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map,
content: locations[i][0]
});
bounds.extend(marker.position);
var openedInfoWindow = null;
var infowindow = new google.maps.InfoWindow();
google.maps.event.addListener(marker, 'click', (function() {
console.log('Klick! Marker='+this.content);
if(openedInfoWindow != null){
openedInfoWindow.close();
openedInfoWindow = null;
}else{
infowindow.setContent(this.content);
infowindow.open(map, this);
openedInfoWindow = infowindow;
google.maps.event.addListener(infowindow, 'closeclick', function() {
openedInfoWindow = null;
});
}
}));
google.maps.event.trigger(marker, 'click');
}
map.fitBounds(bounds);
var listener = google.maps.event.addListener(map, "idle", function () {
map.setZoom(8);
google.maps.event.removeListener(listener);
});
}
function loadScript() {
var script = document.createElement('script');
script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&' + 'callback=initialize';
document.body.appendChild(script);
}
window.onload = loadScript;
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>似乎点击事件是冲突的,但目前我不知道如何改变这一点.有任何想法吗？谢谢.
这篇文章没有解决我的问题(如果我错了请纠正我).其中的信息表现如下:如果您通过点击其标记打开一个新的信息窗口,则关闭另一个标记的已打开的信息窗口.那不是我想要的.只需单击其自己的标记即可关闭信息窗口,而不是单击其他标记.
您链接的帖子确实包含解决方案:"功能关闭".您只需将其扩展为包含每个标记的信息窗口,因为每个标记都有一个唯一的信息窗口,而不是所有标记之间共享的全局信息窗口.
for (i = 0; i < locations.length; i++) {
var marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map,
content: locations[i][0]
});
var infowindow = new google.maps.InfoWindow();
google.maps.event.addListener(marker, 'click', (function (marker, i, infowindow) {
return function () {
console.log('Klick! Marker=' + this.content);
infowindow.setContent(this.content);
infowindow.open(map, this);
};
})(marker, i, infowindow));
bounds.extend(marker.position);
google.maps.event.trigger(marker, 'click');
}
代码段:
function initialize() {
var infos = [];
var locations = [
['Marker 1', 54.08655, 13.39234, 2],
['Marker 2', 53.56783, 13.27793, 1]
];
var map = new google.maps.Map(document.getElementById('map-canvas'), {
mapTypeId: google.maps.MapTypeId.ROADMAP,
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL
}
});
var bounds = new google.maps.LatLngBounds();
for (i = 0; i < locations.length; i++) {
var marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map,
content: locations[i][0]
});
var infowindow = new google.maps.InfoWindow();
google.maps.event.addListener(marker, 'click', (function(marker, i, infowindow) {
return function() {
console.log('Klick! Marker=' + this.content);
infowindow.setContent(this.content);
infowindow.open(map, this);
};
})(marker, i, infowindow));
bounds.extend(marker.position);
google.maps.event.trigger(marker, 'click');
}
map.fitBounds(bounds);
var listener = google.maps.event.addListenerOnce(map, "idle", function() {
map.setZoom(8);
});
}
function loadScript() {
var script = document.createElement('script');
script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&' + 'callback=initialize';
document.body.appendChild(script);
}
window.onload = loadScript;html,
body {
height: 100%;
margin: 0px;
padding: 0px
}
#map-canvas {
height: 500px;
width: 800px;
margin: 0px;
padding: 0px
}<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map-canvas"></div>| 归档时间： |
|
| 查看次数： |
4380 次 |
| 最近记录： |