我在 Google map 上的信息框有问题。我按照我想要的方式设置了它，但关闭按钮消失了:/...有人知道如何解决这个问题吗？
我的代码:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"> </script>
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/src/infobox.js"></script>
<script type="text/javascript">
function initialize() {
var loc, map, marker, infobox;
loc = new google.maps.LatLng(-33.890542, 151.274856);
map = new google.maps.Map(document.getElementById("map"), {
zoom: 12,
center: loc,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
marker = new google.maps.Marker({
map: map,
position: loc,
visible: true
});
infobox = new InfoBox({
content: document.getElementById("infobox"),
disableAutoPan: false,
maxWidth: 220,
pixelOffset: new google.maps.Size(-120, -320),
zIndex: null,
boxStyle: {
width: "220px"
},
closeBoxMargin: "12px 12px 2px 2px",
closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif",
infoBoxClearance: new google.maps.Size(1, 1)
});
google.maps.event.addListener(marker, 'click', function() {
infobox.open(map, this);
map.panTo(loc);
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<title>Creating and Using an InfoBox</title>
</head>
<body>
<div id="map" style="width: 100%; height: 500px"></div>
<br>
<div class="infobox-wrapper">
<div id="infobox">
<div class='actionInfo'>
<div class='markerImage'><a target='_blank' href=" + url + "><img src="http://www.plaveo.eu/Files/Actions/132_s.jpg"></a></div>
<div class='markerActionDescription'><h3><a target='_blank' href=" + url + ">Izdelava spletne strani - PAKET BRONZE - 11%</a></h3></div>
<div class='actionTill'>Traja do: <b>10.10.2014 16h </b> <br /> <a target='_blank' href=" + url + ">Več tukaj ...</a></div>
</div>
<hr />
<div class='coName'><strong>FUTURO WEB DESIGN</strong></div>
<div class='coAddress'>Grajska cesta 26, 4260 Bled</div>
<div class='coContact'>Tel.: 040 351 766</div>
</div>
</div>
</body>
</html>
CSS
.infobox-wrapper {
display:none;
width: 220px;
}
#infobox {
position: relative;
background: #7dc9c8;
border: 5px solid #ffffff;
max-width: 200px;
font-family:Roboto;
padding: 10px;
}
#infobox:after, #infobox:before {
top: 100%;
left: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position:
absolute;
pointer-events: none;
}
#infobox:after {
border-color: rgba(125, 201, 200, 0);
border-top-color: #7dc9c8;
border-width: 20px;
margin-left: -20px;
}
#infobox:before {
border-color: rgba(255, 255, 255, 0);
border-top-color: #ffffff;
border-width: 27px;
margin-left: -27px;
}
最佳答案
按钮被#infobox覆盖。
为#infobox设置一个负的z-index(例如-1)
关于css - Google map 信息框关闭按钮，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26295077/