我有一个谷歌地图设置，可以使用默认的InfoWindow工作正常但是我正在寻找更加风格化的东西，我希望能够控制这个窗口的外观。我查看了InfoBox示例和文档，但我无法看到如何将其实现到我的代码中。
使用Javascript：
// Enable the visual refresh
google.maps.visualRefresh = true;
function initialize() {
var myLatLng = new google.maps.LatLng(52.58448934362705, -2.2128868103027344);
var mapOptions = {
zoom: 19,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.SATELLITE
};
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var marker = new google.maps.Marker({
map: map,
draggable: false,
animation: google.maps.Animation.DROP,
position: new google.maps.LatLng(52.58448934362705, -2.2128868103027344),
icon: {
size: new google.maps.Size(32, 32),
scaledSize: new google.maps.Size(32, 32),
url: "marker.png"
}
});
});
setMarkers(map, obstacles);
}
var obstacles = [
['The Start', -2.2128868103027344 ,52.58448934362705, 1, '<b>The Start</b>', 'bracken-maze-torture.jpg'],
['Chatway Chase', -2.2232937812805176,52.585369365082556, 1, '<b>Chatway Chase</b>', 'bracken-maze-torture.jpg'],
['Elephant Fence', -2.2287386655807495,52.585874554601546, 1, '<b>Elephant Fence</b>', 'bracken-maze-torture.jpg'],
['Elephant Fence', -2.2254180908203125,52.586862101811484, 1, '<b>Elephant Fence</b>', 'bracken-maze-torture.jpg'],
['Elephant Fence', -2.2167277336120605,52.58403954805975, 1, '<b>Elephant Fence</b>', 'bracken-maze-torture.jpg'],
['Elephant Fence', -2.216741144657135,52.58465231189634, 1, '<b>Elephant Fence</b>', 'bracken-maze-torture.jpg'],
['Rabbit Hill', -2.220606207847595,52.58593322139412, 1, '<b>Rabbit Hill</b>', 'bracken-maze-torture.jpg'],
['Brasher Disley Steplechase', -2.2237443923950195,52.58636018290797, 1, '<b>Brasher Disley Steplechase</b>', 'bracken-maze-torture.jpg'],
['Bracken Maze Torture', -2.228196859359741,52.58881105708316, 1, '<b>Bracken Maze Torture</b>', 'bracken-maze-torture.jpg'],
['The Slalom', -2.233647108078003,52.590078809218845, 1, '<b>The Slalom</b>', 'bracken-maze-torture.jpg'],
['Jungle Trench Battlefileds', -2.2293394804000854,52.5877551121424, 1, '<b>Jungle Trench Battlefileds</b>', 'bracken-maze-torture.jpg'],
['Gurkha Grand National', -2.23097562789917,52.58586803606421, 1, '<b>Gurkha Grand National</b>', 'bracken-maze-torture.jpg'],
['Jungle Water Slalom', -2.2270596027374268,52.58515425035844, 1, '<b>Jungle Water Slalom</b>', 'bracken-maze-torture.jpg'],
['Technospanner Legover', -2.2247743606567383,52.58636670137212, 1, '<b>Technospanner Legover</b>', 'bracken-maze-torture.jpg']
];
function setMarkers(map, locations) {
var image = {
size: new google.maps.Size(32, 32),
scaledSize: new google.maps.Size(32, 32),
url: "marker.png"
};
var makeInfoWindow = function(marker, obs) {
// Create info window. In content you can pass simple text or html code.
var infowindow = new google.maps.InfoWindow({
content: "<div style='width:220px; position:relative;'>" + obs[4] + "<img src='" + + "'/></div>",
maxWidth: 220,
});
var boxText = document.createElement("div");
boxText.style.cssText = "border: 1px solid black; margin-top: 8px; background: yellow; padding: 5px;";
boxText.innerHTML = "City Hall, Sechelt<br>British Columbia<br>Canada";
var myOptions = {
content: boxText
,disableAutoPan: false
,maxWidth: 0
,pixelOffset: new google.maps.Size(-140, 0)
,zIndex: null
,boxStyle: {
background: "url('tipbox.gif') no-repeat"
,opacity: 0.75
,width: "280px"
}
,closeBoxMargin: "10px 2px 2px 2px"
,closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif"
,infoBoxClearance: new google.maps.Size(1, 1)
,isHidden: false
,pane: "floatPane"
,enableEventPropagation: false
};
// Add listner for marker. You can add listner for any object. It is just an example in which I am specifying that infowindow will be open on marker mouseover
google.maps.event.addListener(marker, "click", function() {
infowindow.open(map, marker);
});
};
for (var i = 0; i < locations.length; i++) {
var obstacle = locations[i];
var myLatLng = new google.maps.LatLng(obstacle[2], obstacle[1]);
var marker = new MarkerWithLabel({
position: myLatLng,
map: map,
icon: image,
title: obstacle[0],
zIndex: obstacle[3],
labelContent: i + 1,
labelAnchor: new google.maps.Point(14, 29),
labelClass: "labels"
});
makeInfoWindow(marker, obstacle);
}
}
google.maps.event.addDomListener(window, 'load', initialize);
答案 0 :(得分：1)
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Simple Polylines</title>
<style>
#map-canvas, #map_canvas {
height: 800px;
}
.infobox-wrapper {
display:none;
}
.infobox, .infoBox {
margin-top: 8px;
background:#FFF;
color:#666;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
padding: .5em 1em;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
-webkit-box-shadow: 0 0 8px #000;
box-shadow: 0 0 8px #000;
}
.labels {
color: #FFF;
font-family: "Arial", sans-serif;
text-align: center;
width: 26px;
white-space: nowrap;
letter-spacing: 0;
}
</style>
<script src="http://maps.googleapis.com/maps/api/js?v=3.exp&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" src="http://google-maps-utility-library-v3.googlecode.com/svn/tags/markerwithlabel/1.1.5/src/markerwithlabel_packed.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script>
// Enable the visual refresh
google.maps.visualRefresh = true;
var obstacles = [
['The Start', -2.2128868103027344 ,52.58448934362705, 1, '<h2>The Start</h2>', 1],
['Chatway Chase', -2.2232937812805176,52.585369365082556, 1, '<h2>Chatway Chase</h2>', 2],
['Elephant Fence', -2.2287386655807495,52.585874554601546, 1, '<h2>Elephant Fence</h2>', 3],
['Elephant Fence', -2.2254180908203125,52.586862101811484, 1, '<h2>Elephant Fence</h2>', 4],
['Elephant Fence', -2.2167277336120605,52.58403954805975, 1, '<h2>Elephant Fence</h2>', 5],
['Elephant Fence', -2.216741144657135,52.58465231189634, 1, '<h2>Elephant Fence</h2>', 6],
['Rabbit Hill', -2.220606207847595,52.58593322139412, 1, '<h2>Rabbit Hill</h2>', 7],
['Brasher Disley Steplechase', -2.2237443923950195,52.58636018290797, 1, '<h2>Brasher Disley Steplechase</h2>', 8],
['Bracken Maze Torture', -2.228196859359741,52.58881105708316, 1, '<h2>Bracken Maze Torture</h2>', 9],
['The Slalom', -2.233647108078003,52.590078809218845, 1, '<h2>The Slalom</h2>', 10],
['Jungle Trench Battlefileds', -2.2293394804000854,52.5877551121424, 1, '<h2>Jungle Trench Battlefileds</h2>', 11],
['Gurkha Grand National', -2.23097562789917,52.58586803606421, 1, '<h2>Gurkha Grand National</h2>', 12],
['Jungle Water Slalom', -2.2270596027374268,52.58515425035844, 1, '<h2>Jungle Water Slalom</h2>', 13],
['Technospanner Legover', -2.2247743606567383,52.58636670137212, 1, '<h2>Technospanner Legover</h2>', 14]
];
function initialize() {
var myLatLng = new google.maps.LatLng(52.58448934362705, -2.2128868103027344);
var mapOptions = {
zoom: 19,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.SATELLITE
};
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var infobox = new InfoBox({
map: map,
disableAutoPan: false,
maxWidth: 150,
pixelOffset: new google.maps.Size(-140, -40),
zIndex: null,
alignBottom: true,
boxStyle: {
width: "280px"
},
closeBoxMargin: "-16px -20px 0px 0px",
closeBoxURL: "interactive-map-info-close.png",
infoBoxClearance: new google.maps.Size(1, 1)
});
setMarkers(map, infobox);
}
function setMarkers(map, infobox) {
var image = {
size: new google.maps.Size(38, 38),
scaledSize: new google.maps.Size(38, 38),
url: "marker.png"
};
for (var i = 0; i < obstacles.length; i++) {
var obstacle = obstacles[i];
var data = obstacle[0];
var index = obstacle[5];
var myLatLng = new google.maps.LatLng(obstacle[2], obstacle[1]);
var marker = new MarkerWithLabel({
position: myLatLng,
map: map,
icon: image,
title: obstacle[0],
zIndex: obstacle[3],
labelContent: i + 1,
labelAnchor: new google.maps.Point(13, 33),
labelClass: "labels"
});
google.maps.event.addListener(marker, 'click', (function(marker, data) {
return function() {
infobox.setContent(data);
infobox.open(map, marker)
}
})(marker, data));
}
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>