调整infoWindow框Google Maps API v3的大小 [英] Resize the infoWindow box Google Maps API v3
问题描述
默认的infoWindow大小对我来说太大了。我希望它变得更小，我不知道如何去做。我已经尝试在我的 infoWindow 构造函数中设置 maxWidth 参数。
The default infoWindow size is way too big for me. I want it to be much smaller can I can't figure out how to do it. I've tried setting a maxWidth parameter on my infoWindow constructor like this
var infowindow = new google.maps.InfoWindow({'maxWidth':'10px'});
并设置CSS的宽度像这样
and setting the CSS width like this
<style type="text/css">
#infoWindow {
width: 10px;
}
</style>
但似乎只是改变了文字环绕的大小，而不是实际的框。如何更改 infoWindow 框的大小？
but that only seems to change the size of the text wrapping, not the actual box. How do I change the size of the infoWindow box?
这是我的代码。
<!doctype html>
<html lang="en">
<head>
<title>jQuery mobile with Google maps - Google maps jQuery plugin</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<style type="text/css">
#infoWindow {
width: 10px;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3&sensor=false&language=en"> </script>
<script type="text/javascript">
var cityList = [
['Chicago', 41.850033, -87.6500523, 1],
['Illinois', 40.797177,-89.406738, 2]
];
var demoCenter = new google.maps.LatLng(41,-87);
var map;
function initialize()
{
map = new google.maps.Map(document.getElementById('map_canvas'), {
zoom: 7,
center: demoCenter,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
addMarkers();
}
function addMarkers()
{
var marker, i;
var infowindow = new google.maps.InfoWindow({'maxWidth':'10px'});
for (i = 0; i < cityList.length; i++)
{
marker = new google.maps.Marker({
position: new google.maps.LatLng(cityList[i][1], cityList[i][2]),
map: map,
title: cityList[i][0]
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
var contentString = '<div id="infoWindow">'
+'<div id="bodyContent">'
+'<p>'
+ "This location is:<br>"
+ marker.title
+'</p>'
+'</div>'
+ '</div>';
return function() {
infowindow.setContent(contentString);
infowindow.open(map, marker);
}
})(marker, i));
}
}
</script>
</head>
<body onload="initialize()">
<div id="basic-map" data-role="page">
<div data-role="header">
<h1><a data-ajax="false" href="/">jQuery mobile with Google maps v3</a> examples</h1>
<a data-rel="back">Back</a>
</div>
<div data-role="content">
<div class="ui-bar-c ui-corner-all ui-shadow" style="padding:1em;">
<div id="map_canvas" style="height:350px;"></div>
</div>
</div>
</div>
</body>
</html>
推荐答案
原生infoWindow具有最小尺寸。如果它对您很重要，您需要查看使用替代解决方案，如 infoBubble 或 InfoBox
The native infoWindow has a minimum size. If it is to big for you, you need to look at using an alternative solution like infoBubble or InfoBox
这篇关于调整infoWindow框Google Maps API v3的大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
