我一直在为我的网站切换谷歌地图一段时间了，并且无法弄清楚当另一个标记打开时如何关闭其他标记。我已经要求鼠标输出代码暂时关闭标记，但这是一个蹩脚的补丁，并希望找到一种更好的方法。
这是一些标记脚本。
我想如果我添加了infoWindow.close();或者类似的内容
infoWindow. + infoWindow2. + infoWindow3. + close();
到onClick函数（）它可能会工作，但我不知道这样做的适当区域或这是否有效。
// Get the HTML DOM element that will contain your map
// We are using a div with id="map" seen below in the <body
var mapElement = document.getElementById('map');
// Create the Google Map using out element and options defined above
var map = new google.maps.Map(mapElement, mapOptions);
var image = 'img/marker.png';
var office = new google.maps.Marker({
position: myLatLng,
map: map,
animation: google.maps.Animation.BOUNCE,
icon: image,
title: 'Coven-Goldman'
});
myInfoWindowOptions = {
content: '<div class="hideonmob info-window-content" <h4 Hello! This is our office. </h4 <p Please click on the other locations to see
information on our properties.</p <p <img style="width:20px"
src="img/logosmall.png" </p </div ',
maxWidth: 275 };
infoWindow = new google.maps.InfoWindow(myInfoWindowOptions);
google.maps.event.addListener(office, 'click', function() {
infoWindow.open(map,office); });
google.maps.event.addListener(office, 'dragstart', function(){
infoWindow.close(); });
google.maps.event.addListener(office, 'mouseover', function(){
infoWindow.close(); });
infoWindow.open(map,office);
var image = 'img/marker.png';
var marker2 = new google.maps.Marker({
position: buildingone,
map: map,
animation: google.maps.Animation.DROP,
icon: image,
title: 'Coven-Goldman'
});
myInfoWindowOptions = {
content: '<div class="hideonmob info-window-content" <h4 24475 Hilltop Dr <br Beachwood, OH </h4 <p Please click on the other
locations to see information on our properties.</p <p <img
style="width: 100%;" src="img/23800CommerceShad.jpg" </p </div ',
maxWidth: 275 };
infoWindow2 = new google.maps.InfoWindow(myInfoWindowOptions);
google.maps.event.addListener(marker2, 'click', function() {
infoWindow2.open(map,marker2); });
google.maps.event.addListener(marker2, 'dragstart', function(){
infoWindow2.close(); });
google.maps.event.addListener(marker2, 'mouseover', function(){
infoWindow2.close(); });
var image = 'img/marker.png';
var marker3 = new google.maps.Marker({
position: buildingtwo,
map: map,
animation: google.maps.Animation.DROP,
icon: image,
title: 'Coven-Goldman'
});
myInfoWindowOptions = {
content: '<div class="hideonmob info-window-content" <h4 24475 Hilltop Dr <br Beachwood, OH </h4 <p Please click on the other
locations to see information on our properties.</p <p <img
style="width: 100%;" src="img/23800CommerceShad.jpg" </p </div ',
maxWidth: 275 };
infoWindow3 = new google.maps.InfoWindow(myInfoWindowOptions);
google.maps.event.addListener(marker3, 'click', function() {
infoWindow3.open(map,marker3); });
google.maps.event.addListener(marker3, 'dragstart', function(){
infoWindow3.close(); });
google.maps.event.addListener(marker3, 'mouseover', function(){
infoWindow3.close(); });
var image = 'img/marker.png';
var marker4 = new google.maps.Marker({
position: buildingthree,
map: map,
animation: google.maps.Animation.DROP,
icon: image,
title: 'Coven-Goldman'
});
myInfoWindowOptions = {
content: '<div class="hideonmob info-window-content" <h4 24475 Hilltop Dr <br Beachwood, OH </h4 <p Please click on the other
locations to see information on our properties.</p <p <img
style="width: 100%;" src="img/23800CommerceShad.jpg" </p </div ',
maxWidth: 275 };
infoWindow4 = new google.maps.InfoWindow(myInfoWindowOptions);
google.maps.event.addListener(marker4, 'click', function() {
infoWindow4.open(map,marker4); });
google.maps.event.addListener(marker4, 'dragstart', function(){
infoWindow4.close(); });
google.maps.event.addListener(marker4, 'mouseover', function(){
infoWindow4.close(); });
“
我网站的实时链接
答案 0 :(得分：1)
在你说的问题中你需要关闭标记，但我假设你的意思是关闭标记上的infoWindow。对于每个标记，您不需要单独的infoWindow实例。事实上，这不是推荐的做法。以下是有关处理infoWindows的其他文档。
此外，您有很多重复的代码。清理它将有助于简化它。
这应该有助于推动你朝着正确的方向发展（我没有测试过这段代码的语法错误，但一般流程应该是正确的）：
// Get the HTML DOM element that will contain your map
// We are using a div with id="map" seen below in the <body
var mapElement = document.getElementById('map');
// Create the Google Map using out element and options defined above
var map = new google.maps.Map(mapElement, mapOptions);
myInfoWindowOptions = {
maxWidth: 275
};
infoWindow = new google.maps.InfoWindow(myInfoWindowOptions);
//construct custom objects to handle the information that will change.
var office = {
position: myLatLng,
title: "title information",
content: "infowindow content"
};
var building1 = {
position: buildingone,
title: "title information",
content: "infowindow content"
};
var building2 = {
position: buildingtwo,
title: "title information",
content: "infowindow content"
};
var building3 = {
position: buildingthree,
title: "title information",
content: "infowindow content"
};
//store the objects in a array
var buildings = [office, building1, building2, building3];
//marker array to store marker instances if you need them later.
var markers = [];
//loop through object array and construct the markers
for (var i = 0; i < buildings.length; i++) {
var marker = new google.maps.Marker({
position: buildings[i].position,
map: map,
animation: google.maps.Animation.BOUNCE,
icon: 'img/marker.png',
title: buildings[i].title
});
google.maps.event.addListener(marker, 'click', function () {
infoWindow.setContent(buildings[i].content);
infoWindow.setTitle(buildings[i].title);
infoWindow.setPosition(buildings[i].position);
infoWindow.open(map, marker);
});
google.maps.event.addListener(marker, 'dragstart', function () {
infoWindow.close();
});
google.maps.event.addListener(marker, 'mouseover', function () {
infoWindow.close();
});
//add marker to array
markers.push(marker);
}
//open office infowindow.
infoWindow.setPosition(office.position);
infoWindow.setTitle(office.title);
infoWindow.setContent(office.content);
infoWindow.open(map, office.position);