Javascript 尝试在谷歌地图中创建多个信息框，当单击新信息框时，这些信息框将消失
我正在使用谷歌地图的Infobox插件。我有这些很好的工作-当一个人点击地图上的一个点，信息框弹出没有问题。但是，我希望弹出窗口在选择其他标记时消失 我已经找到了一些如何解决这个问题的例子，但是我很难将这些解决方案集成到我的代码中。我对javascript相当陌生，我真的需要一些指导Javascript 尝试在谷歌地图中创建多个信息框，当单击新信息框时，这些信息框将消失,javascript,maps,infowindow,Javascript,Maps,Infowindow,我正在使用谷歌地图的Infobox插件。我有这些很好的工作-当一个人点击地图上的一个点，信息框弹出没有问题。但是，我希望弹出窗口在选择其他标记时消失 我已经找到了一些如何解决这个问题的例子，但是我很难将这些解决方案集成到我的代码中。我对javascript相当陌生，我真的需要一些指导 <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <meta
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Smelting</title>
<link
href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css"
rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&sfgdata=+sfgRmluamFuX1R5cGU9amF2YV9zY3JpcHQmRmluamFuX0xhbmc9dGV4dC9qYXZhc2NyaXB0+a"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/src/infobox.js"></script>
<style type="text/css">
.infoBox h2
{
font-size: 22px;
margin: 0 0 4px 2px;
}
.infoBox p
{
font-size: 14px;
margin: 0 2px;
}
.infoBox a
{
color:White;
text-decoration:none;
}
.infoBox p.sitenumber
{
font-size: 12px;
margin: 7px 0 2px 2px;
}
.siteButton
{
background-color: #465b66;
padding: 7px 10px;
text-align: center;
margin-top: 15px;
}
</style>
<script type="text/javascript">
function initialize() {
// Creating the map
var map = new google.maps.Map(document.getElementById("map_canvas"), {
mapTypeId: google.maps.MapTypeId.ROADMAP,
streetViewControl: false
});
// Styling the map
var styledMap = [{
featureType: "all",
stylers: [{
saturation: -80
}]
}, {
featureType: "road.arterial",
elementType: "geometry",
stylers: [{
hue: "#00ffee"
}, {
saturation: 50
}]
}, {
featureType: "poi.business",
elementType: "labels",
stylers: [{
visibility: "off"
}]
}
];
//Calling the map styles
map.setOptions({
styles: styledMap
});
// List of images
var images = [ 'images/icon1.png', 'images/icon2.png','images/icon3.png'];
loadMarkers();
// Zoom and center the map to fit the markers
var bounds = new google.maps.LatLngBounds();
// Create the markers
function addMarker(data, images) {
var marker = new google.maps.Marker({
position: new google.maps.LatLng(data.lat, data.long),
map: map,
title: data.name,
icon: images[--data["dot-type"]]
});
var myOptions = {
content: boxTitle
, boxStyle: {
color: "#fff"
, textAlign: "left"
, fontSize: "12pt"
, width: "250px"
, height: "230px"
, padding: "10px"
, fontFamily: "Arial"
, fontStyle: "bold"
, background : "transparent url( 'images/sampleback.png' ) no-repeat 0 0",
}
, disableAutoPan: true
, pixelOffset: new google.maps.Size(-90,-280)
, position: new google.maps.LatLng(data.lat, data.long)
, closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif"
, isHidden: false
, pane: "floatPane"
};
var ib = new InfoBox(myOptions);
var boxTitle = document.createElement("div");
var boxNum = data.id;
var boxTitle= data.name;
var boxAddress = data.street;
var boxCity = data.city;
var boxSt = data.st;
var boxZip = data.zip;
var boxText = document.createElement("div");
boxText.content = "<p class='sitenumber'>" + "Site #" + boxNum + "</p>" +"<h2>"+boxTitle+"</h2>" + "<p>" + boxAddress + "</p>"+ "<p>" + boxCity + ", " + boxSt + " " + boxZip +"</p>" + "<b>" + "<a href='#'>" + "<div class= 'siteButton'>" + "VIEW THIS SITE DETAIL" + "</div>" + "</a>";
google.maps.event.addListener(marker, "click", function (event) {
ib.setContent(boxText.content);
ib.open(map, marker);
});
bounds.extend(new google.maps.LatLng(data.lat, data.long));
map.fitBounds(bounds);
}
function loadMarkers() {
var siteUrl = "data/main.js";
$.ajax({
dataType: "json",
url: siteUrl,
success: load
});
function load(data) {
for (index in data) addMarker(data[index], images);
}
};
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas"></div>
</body>
每个标记都会弹出一个框的原因是，您正在为每个标记创建一个框。如果您只需要一个框，只需创建一次，然后对每个标记重复使用它。在您的情况下，这只需要将实例化代码放在addMarker函数之外：
<script type="text/javascript">
function initialize() {
// Creating the map
var map = new google.maps.Map(document.getElementById("map_canvas"), {
mapTypeId: google.maps.MapTypeId.ROADMAP,
streetViewControl: false
});
// Styling the map
var styledMap = [{
featureType: "all",
stylers: [{
saturation: -80
}]
}, {
featureType: "road.arterial",
elementType: "geometry",
stylers: [{
hue: "#00ffee"
}, {
saturation: 50
}]
}, {
featureType: "poi.business",
elementType: "labels",
stylers: [{
visibility: "off"
}]
}
];
//Calling the map styles
map.setOptions({
styles: styledMap
});
// List of images
var images = [ 'images/icon1.png', 'images/icon2.png','images/icon3.png'];
loadMarkers();
// Zoom and center the map to fit the markers
var bounds = new google.maps.LatLngBounds();
// Move the InfoBox creation here
var myOptions = {
content: boxTitle
, boxStyle: {
color: "#fff"
, textAlign: "left"
, fontSize: "12pt"
, width: "250px"
, height: "230px"
, padding: "10px"
, fontFamily: "Arial"
, fontStyle: "bold"
, background : "transparent url( 'images/sampleback.png' ) no-repeat 0 0",
}
, disableAutoPan: true
, pixelOffset: new google.maps.Size(-90,-280)
, position: new google.maps.LatLng(data.lat, data.long)
, closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif"
, isHidden: false
, pane: "floatPane"
};
var ib = new InfoBox(myOptions);
// Create the markers
function addMarker(data, images) {
var marker = new google.maps.Marker({
position: new google.maps.LatLng(data.lat, data.long),
map: map,
title: data.name,
icon: images[--data["dot-type"]]
});
var boxTitle = document.createElement("div");
var boxNum = data.id;
var boxTitle= data.name;
var boxAddress = data.street;
var boxCity = data.city;
var boxSt = data.st;
var boxZip = data.zip;
var boxText = document.createElement("div");
boxText.content = "<p class='sitenumber'>" + "Site #" + boxNum + "</p>" +"<h2>"+boxTitle+"</h2>" + "<p>" + boxAddress + "</p>"+ "<p>" + boxCity + ", " + boxSt + " " + boxZip +"</p>" + "<b>" + "<a href='#'>" + "<div class= 'siteButton'>" + "VIEW THIS SITE DETAIL" + "</div>" + "</a>";
google.maps.event.addListener(marker, "click", function (event) {
ib.setContent(boxText.content);
ib.open(map, marker);
});
bounds.extend(new google.maps.LatLng(data.lat, data.long));
map.fitBounds(bounds);
}
function loadMarkers() {
var siteUrl = "data/main.js";
$.ajax({
dataType: "json",
url: siteUrl,
success: load
});
function load(data) {
for (index in data) addMarker(data[index], images);
}
};
}
</script>