使用Google Maps API设置InfoWindow样式
使用Google Maps API设置InfoWindow样式
提问于 2013-03-01 00:36:52
我目前正在使用Google Maps，现在一切都很好。但是我想改变InfoWindow的样式。我一直在研究，但还没有找到任何有用的东西来帮助我理解InfoWindow (甚至连API文档都没有)。
So；如何更改地图中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使这一切成为可能。
回答 3
Stack Overflow用户
回答已采纳
发布于 2013-03-01 01:05:41
在接口中：https://developers.google.com/maps/documentation/javascript/overlays#InfoWindows
InfoWindow的内容可以包含文本字符串、HTML片段或DOM元素本身。
您可以传入带样式的超文本标记语言，也可以创建InfoWindow本身，然后将其作为对象拉入JS。
Stack Overflow用户
发布于 2016-02-18 02:44:41
使用.gm样式的.gm-style-iw类设置文本样式，例如：
.gm-style .gm-style-iw {
font-size: 16px;
font-weight: bold;
font-family: sans-serif;
text-transform: uppercase;
}Stack Overflow用户
发布于 2013-09-16 13:38:40
您可以使用java脚本进行更改，如下所示
var contentString = '<div style="width: 94.2%; padding-left:10px; height: 25px;float: left;color: #FFF;background: #ed1e79;line-height: 25px;border-radius:5px 5px 0px 0px;"><strong><b>"You feild"</b></strong></div><div style="clear:both;height:0px;"><div style="float:left;width:90%;padding:5px 10px;border:1px solid #ccc;border-top:none;border-radius:0px 0px 5px 5px;"><div style="float:left;color:#666;font-size:18px;font-weight:bold;margin:5px 0px;"> <div style="padding: 0px;">]]..product_list[i].category..[[</div></div><div style="clear:both;height:0px;"></div><div style="float:left;line-height:18px;color:#666;font-size:13px;">"You feild"</div><div style="clear:both;height:0px;"></div><form action=\"navigat:"You feild"\"><input type=\"submit\"/ style=\"background:#7e7e7e;float:right;color:#FFF;padding:5px 7px;font-size:10px;font-weight:bold;border:none;margin:5px 0px; border-radius:0px !important;\" value=\"More Info\" ></form></div></div>';
var infowindow = new google.maps.InfoWindow({content:contentString});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/15140803
复制相关文章
相似问题