【发布时间】：2013-02-28 16:36:52
【问题描述】：
我目前正在使用 Google 地图，现在一切正常。但我想更改 InfoWindow 的样式。我一直在研究，但还没有找到任何有用的东西来帮助我理解 InfoWindow（甚至不是 API 文档。）
所以；如何更改地图中 InfoWindow 框的颜色、背景、边框等样式？
提前致谢。
这是我的代码：
<!DOCTYPE html>
<head>
<title>Google Maps Example</title>
<script src='http://code.jquery.com/jquery.min.js' type='text/javascript'></script>
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 font-family: Helvetica;}
#map_canvas { height: 100% }
.InfoWindow {
background: #000;
}
</style>
</head>
<body>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var infowindow = null;
$(document).ready(function () { initialize(); });
function initialize() {
var centerMap = new google.maps.LatLng(59.9149, 10.72974);
var myOptions = {
zoom: 14,
center: centerMap,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
setMarkers(map, sites);
infowindow = new google.maps.InfoWindow({
content: "loading..."
});
}
var sites = [
['Mount Evans', 59.934615,10.743392, 4, '<div class="InfoWindow"><b>This is Mount Evans.</b></div>'],
['Irving Homestead', 40.315939, -105.440630, 2, 'This is the Irving Homestead.'],
['Badlands National Park', 43.785890, -101.90175, 1, 'This is Badlands National Park'],
['Flatirons in the Spring', 39.99948, -105.28370, 3, 'These are the Flatirons in the spring.']
];
var image = new google.maps.MarkerImage(
'http://mapicons.nicolasmollet.com/wp-content/uploads/mapicons/shape-default/color-8c4eb8/shapecolor-color/shadow-1/border-dark/symbolstyle-white/symbolshadowstyle-dark/gradient-no/bar.png',
new google.maps.Size(30,37)
);
function setMarkers(map, markers) {
for (var i = 0; i < markers.length; i++) {
var sites = markers[i];
var siteLatLng = new google.maps.LatLng(sites[1], sites[2]);
var marker = new google.maps.Marker({
position: siteLatLng,
map: map,
title: sites[0],
zIndex: sites[3],
html: sites[4],
icon: image
});
var contentString = "Some content";
google.maps.event.addListener(marker, "click", function () {
infowindow.setContent(this.html);
infowindow.open(map, this);
});
}
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>
编辑：看起来无法设置 InfoWindow 的样式（只是输入）。然而，Infobox 使这成为可能。
【问题讨论】：
-
您可能想访问Link
-
您也可以使用InfoBubble（同一站点）进行操作。
-
您也可以使用 jquery 来完成，方法是在您的内容上设置一个 id，然后使用 .parent() 方法来获取它的句柄。我以前用它来做一些简单的事情，但它有一些缺点。
-
InfoWindow不是很有风格。要真正做任何您想做的事，您可能需要查看InfoBox。它允许您使用自己的 HTML/CSS 来创建信息窗口（而InfoWindowonly 允许您在它自己的信息窗口 HTML 代码中插入 HTML/CSS）。以this SO answer 为例。 -
你也可以试试Snazzy Info Window。它通过 JavaScript、CSS 甚至 SCSS 支持响应式大小、动态内容和样式。我们将其作为Snazzy Maps 的一部分，并决定将其开源供任何人使用！ :)