我想在Google地图的多个信息窗口中隐藏特定的infoWindow内容。如果我打开一个信息窗口,则可以正常工作,但是如果我一次打开多个信息窗口,则另一个信息窗口中的内容会更改。
请找到以下代码
var map;
var markers = [];
function initMap() {
map = new
google.maps.Map(document.getElementById('map_canvas'), {
zoom: 14,
center: new google.maps.LatLng(13.018057, 77.666794),
mapTypeId: 'roadmap',
disableDefaultUI: true
});
function addMarker(feature) {
var marker = new google.maps.Marker({
position: feature.position,
map: map,
type: feature.type,
id:feature.id,
description: feature.description,
infoWindow:new google.maps.InfoWindow({})
});
marker.addListener('click', function() {
var content="<h5>"+marker.type+"</h5>"+
"<p id='des'>"+marker.description+"</p>"
google.maps.event.addListener(this.infoWindow,
'domready', function () {
if(marker.id===1){
document.getElementById("des").style.display="none";
}
});
this.infoWindow.setContent(content);
this.infoWindow.open(map,marker);
});
markers.push(marker);
}
var features = [
{
position: new google.maps.LatLng(13.018057, 77.666794),
type: 'type1',
id: 1,
description: 'welcome to Hyd'
}, {
position: new google.maps.LatLng(13.015136, 77.647265),
type: 'type2',
id:2,
description: ' welcome to Blr'
}, {
position: new google.maps.LatLng(13.009970, 77.660088),
type: 'type3',
id:3,
description: ' welcome to Mum'
}
];
for (var i = 0; i < features.length; i++) {
addMarker(features[i]);
}
}
$(document).ready(function() {
initMap();
});
请在下面找到 jsfiddle
答案 0 :(得分:1)
最简单的解决方法是在标记单击事件监听器函数中使用this
来引用marker
(标记变量指向循环中最后处理的标记),然后进行domready回调,您需要将其保存(在回调函数的结尾处为that
)
此外,您有多个信息窗口,其中具有相同的元素ID,元素ID 必须是唯一的。一种选择是将标记ID附加到元素ID(即标记/信息窗口1的des1
)。
marker.addListener('click', function() {
// save this for use inside domready event listener callback function
var that = this;
var content = "<h5>" + this.type + "</h5>" +
"<p id='des"+this.id+"'>" + this.description + "</p>"
// if need to wait for infowindow to open
google.maps.event.addListener(this.infoWindow, 'domready', function() {
console.log("that.id="+that.id)
if (that.id === 1) {
if (!!document.getElementById("des"+that.id))
document.getElementById("des"+that.id).style.display = "none";
}
});
this.infoWindow.setContent(content);
this.infoWindow.open(map, this);
// if domready has already fired
if (that.id === 1) {
if (!!document.getElementById("des"+that.id))
document.getElementById("des"+that.id).style.display = "none";
}
});
代码段:
var map;
var markers = [];
function initMap() {
map = new google.maps.Map(document.getElementById('map_canvas'), {
zoom: 14,
center: new google.maps.LatLng(13.018057, 77.666794),
mapTypeId: 'roadmap',
disableDefaultUI: true
});
function addMarker(feature) {
var marker = new google.maps.Marker({
position: feature.position,
map: map,
type: feature.type,
id: feature.id,
title: "" + feature.id,
description: feature.description,
infoWindow: new google.maps.InfoWindow({})
});
marker.addListener('click', function() {
// save this for use inside domready event listener callback function
var that = this;
var content = "<h5>" + this.type + "</h5>" +
"<p id='des" + this.id + "'>" + this.description + "</p>"
// if need to wait for infowindow to open
google.maps.event.addListener(this.infoWindow, 'domready', function() {
console.log("that.id=" + that.id)
if (that.id === 1) {
if (!!document.getElementById("des" + that.id))
document.getElementById("des" + that.id).style.display = "none";
}
});
this.infoWindow.setContent(content);
this.infoWindow.open(map, this);
// if domready has already fired
if (that.id === 1) {
if (!!document.getElementById("des" + that.id))
document.getElementById("des" + that.id).style.display = "none";
}
});
markers.push(marker);
}
var features = [
{
position: new google.maps.LatLng(13.018057, 77.666794),
type: 'type1',
id: 1,
description: 'welcome to Hyd'
}, {
position: new google.maps.LatLng(13.015136, 77.647265),
type: 'type2',
id: 2,
description: ' welcome to Blr'
}, {
position: new google.maps.LatLng(13.009970, 77.660088),
type: 'type3',
id: 3,
description: ' welcome to Mum'
}
];
for (var i = 0; i < features.length; i++) {
addMarker(features[i]);
}
}
$(document).ready(function() {
initMap();
});
html,
body,
#map_canvas {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map_canvas"></div>