我正在尝试使用我的数据库中的信息框(使用 API v3)在谷歌地图上的标记上显示数据。事实上,Infowindows 可以完美运行,但我想为它们设置样式,这就是我切换到 Infobox 的原因。但它们并没有像我预期的那样出现 Infowindows。
视图地图.php
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/src/infobox.js"></script>
<script type="text/javascript">
var infowindow;
var map;
var infobox;
function initialize() {
var myLatlng = new google.maps.LatLng(6.796396,79.877823);
var myOptions = {
zoom: 13,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);
var transitLayer = new google.maps.TransitLayer();
transitLayer.setMap(map);
downloadUrl("generateXml.php", function(data) {
data = xmlParse(data);
var markers = data.documentElement.getElementsByTagName("marker");
var bounds = new google.maps.LatLngBounds();
for (var i = 0; i < markers.length; i++) {
var latlng = new google.maps.LatLng(parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
bounds.extend(latlng);
var marker = createMarker(markers[i].getAttribute("nom"),markers[i].getAttribute("descripcio"), latlng);
}
map.fitBounds(bounds);
});
}
function createMarker(nom,descripcio,latlng) {
var marker = new google.maps.Marker({
title:nom,
position: latlng,
map: map
});
infobox = new InfoBox({
content: descripcio,
disableAutoPan: false,
maxWidth: 150,
pixelOffset: new google.maps.Size(-140, 0),
zIndex: null,
boxStyle: {
background: "url('http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/examples/tipbox.gif') no-repeat",
opacity: 0.75,
width: "280px"
},
closeBoxMargin: "12px 4px 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, marker);
map.panTo(latlng);
});
return marker;
}
function downloadUrl(url, callback) {
var request = window.ActiveXObject ?
new ActiveXObject('Microsoft.XMLHTTP') :
new XMLHttpRequest;
request.onreadystatechange = function() {
if (request.readyState == 4) {
request.onreadystatechange = doNothing;
callback(request, request.status);
}
};
request.open('GET', url, true);
request.send(null);
}
function doNothing() {}
</script>