获取谷歌地图v3来调整InfoWindow的高度
获取谷歌地图v3来调整InfoWindow的高度
提问于 2011-03-15 23:46:11
当我单击一个标记并显示InfoWindow时，如果内容的长度大于InfoWindow的默认高度(90px)，高度不会调整。
- 我只使用文本，不使用图像。
- 我尝试过maxWidth。
- 我检查了继承的CSS。
- 我将内容包装在div中，并将CSS应用到其中，包括高度。
- 我甚至尝试使用InfoWindow上的domready事件强制InfoWindow根据jQuery调整大小。
我只剩下几根头发了。这是我的JS：
var geocoder;
var map;
var marker;
function initialize() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(41.8801,-87.6272);
var myOptions = {
zoom: 13,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
function codeAddress(infotext,address) {
geocoder.geocode({ 'address': address }, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
var image = '/path-to/mapMarker.png';
var infowindow = new google.maps.InfoWindow({ content: infotext, maxWidth: 200 });
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location,
icon: image
});
google.maps.event.addListener(marker, 'click', function () {
infowindow.open(map, marker);
});
}
});
}
function checkZipcode(reqZip) {
if ( /[0-9]{5}/.test(reqZip) ) {
$.ajax({
url: 'data.aspx?zip=' + reqZip,
dataType: 'json',
success: function(results) {
$.each(results.products.product, function() {
var display = "<span id='bubble-marker'><strong>"+this.name+"</strong><br>"+
this.address+"<br>"+
this.city+", "+this.state+" "+this.zip+"<br>"+
this.phone+"</span>";
var address = this.address+","+
this.city+","+
this.state+","+
this.zip;
codeAddress(display,address);
});
},
error: function() { $('#information-bar').text('fail'); }
});
} else { $('#information-bar').text('Zip codes are five digit numbers.'); }
}
$('#check-zip').click(function() { $('#information-bar').text(''); checkZipcode($('#requested-zipcode').val()); });
initialize();InfoText和Address来自一个XML文件的AJAX查询。数据不是问题所在，因为数据总是正确无误的。在检索和格式化数据之后调用codeAddress()。
文件中的HTML：
<div id="google_map"> <div id="map_canvas" style="width:279px; height:178px"></div> </div>我的InfoWindow内容的CSS (没有其他CSS应用于地图)：
#bubble-marker{ font-size:11px; line-height:15px; }回答 5
Stack Overflow用户
发布于 2011-11-14 19:58:57
我终于为这个问题找到了一个可行的解决方案。不像我希望的那样灵活，但它相当不错。从根本上说，关键点是:不要使用字符串作为窗口内容，而要使用DOM节点。这是我的代码：
// this dom node will act as wrapper for our content
var wrapper = document.createElement("div");
// inject markup into the wrapper
wrapper.innerHTML = myMethodToGetMarkup();
// style containing overflow declarations
wrapper.className = "map-popup";
// fixed height only :P
wrapper.style.height = "60px";
// initialize the window using wrapper node
var popup = new google.maps.InfoWindow({content: wrapper});
// open the window
popup.open(map, instance);以下是CSS声明：
div.map-popup {
overflow: auto;
overflow-x: hidden;
overflow-y: auto;
}ps："instance“是指google.maps.OverlayView的当前自定义子类(我正在扩展它)
Stack Overflow用户
发布于 2013-09-10 07:22:07
只需用div包装您的内容并指定其高度：<div style="height:60px">...</div>，例如
myMarker.setContent('<div style="height:60px">' + txt + '</div>');在我的情况下，
- 已经足够了。
Stack Overflow用户
发布于 2011-07-11 02:02:36
您的地图画布太小。增加<div id="map_canvas">元素的宽度/高度，您应该会自动看到更大的InfoWindows。
也就是说，我在一个正在建设的网站上遇到了同样的问题。我解决这个问题的方法是创建一个包含InfoWindow内容的克隆div，测量该div的宽度和高度，然后将InfoWindow内容div设置为具有测量的宽度和高度。下面是移植到codeAddress函数中间的代码(还要注意，我从InfoWindow声明中删除了maxWidth: 200 )：
function codeAddress(infotext,address) {
geocoder.geocode({ 'address': address }, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
// Create temporary div off to the side, containing infotext:
var $cloneInfotext = $('<div>' + infotext + '</div>')
.css({marginLeft: '-9999px', position: 'absolute'})
.appendTo($('body'));
// Wrap infotext with a div that has an explicit width and height,
// found by measuring the temporary div:
infotext = '<div style="width: ' + $cloneInfotext.width() + 'px; ' +
'height: ' + $cloneInfotext.height() + 'px">' + infotext +
'</div>';
// Delete the temporary div:
$cloneInfotext.remove();
// Note no maxWidth defined here:
var infowindow = new google.maps.InfoWindow({ content: infotext });
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
google.maps.event.addListener(marker, 'click', function () {
infowindow.open(map, marker);
});
}
});
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/5314239
复制相关文章
相似问题