javascript 如何为谷歌地图信息窗口设置边界半径
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8923034/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how do set border radius for google map infowindow
提问by MVSANK
I have google map infowindow,i want to set border radius to infowindow. so how do it.
我有谷歌地图信息窗口，我想将边界半径设置为信息窗口。那怎么办。
and this is my code
这是我的代码
var latlng = new google.maps.LatLng(lat,lng);
var myOptions = {
zoom : 8,
center : latlng,
mapTypeId : google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvass"),
myOptions);
var infowindow = new google.maps.InfoWindow();
infowindow.open(map, marker);
采纳答案by jenswirf
I think you have to create a custom infobox overlay to change anything other than the content, the google maps infoWindow is if I'm not mistaken just a scaled image.
我认为您必须创建一个自定义信息框叠加层来更改除内容以外的任何内容，如果我没记错的话，谷歌地图 infoWindow 只是一个缩放图像。
Go custom! Example here: http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobubble/examples/example.html
去定制！此处示例：http: //google-maps-utility-library-v3.googlecode.com/svn/trunk/infobubble/examples/example.html
and here: http://gmaps-samples-v3.googlecode.com/svn/trunk/infowindow_custom/infowindow-custom.html
在这里：http: //gmaps-samples-v3.googlecode.com/svn/trunk/infowindow_custom/infowindow-custom.html
回答by Andy R.
You can do it also with CSS. For me works this:
您也可以使用 CSS 来实现。对我来说是这样的：
#map_canvass > div > div > div > div > div:not(:first-child) > div > div:nth-child(12) {
border-radius: 10px 10px 10px 10px;
}
回答by Gordon Rouse
As I don't like counting to 12, I found the draggable attribute could identify it:
由于我不喜欢数到 12，我发现可以通过 draggable 属性识别它：
jQuery:
jQuery：
$(document).find('#map_canvas').find( 'div[draggable="false"]' ).css('border-radius', '5px');
CSS:
CSS：
#map_canvas div[draggable="false"] { border-radius: 5px }
回答by Jirayu L
Yeah, seem the link is dead and old code no longer works. try my script
是的，似乎链接已失效，旧代码不再有效。试试我的脚本
var infoElement = $('.gm-style-iw').prev();
var boxWrapper = infoElement[0].childNodes[1],
boxContainer = infoElement[0].childNodes[3];
//then set border-radius to wrapper and container via jQuery
$(boxWrapper).css({
borderRadius: 4
});
$(boxContainer).css({
border: '2px solid #FFC800', // if you wanna override new border
borderRadius: 4,
});
回答by Louis R
The previous answers seems to be outdated, i succeed doing this with the following css :
以前的答案似乎已经过时，我使用以下 css 成功做到了这一点：
.gm-style > div > div + div + div > div > div + div > div > div > div + div {
border-radius: 10px 10px 10px 10px !important;
}
