如何为谷歌地图信息窗口设置边界半径答案

【问题标题】：how do set border radius for google map infowindow如何为谷歌地图信息窗口设置边界半径
【发布时间】：2012-02-13 22:24:41
【问题描述】：

我有谷歌地图信息窗口，我想将边界半径设置为信息窗口。那怎么办呢。

这是我的代码

  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);

【问题讨论】：

已经回答了一个非常相似的问题：Google Maps: How to create a custom InfoWindow?。它专门讨论了设置圆角半径。

标签： javascript ajax google-maps google-maps-api-3

【解决方案1】：

以前的答案似乎已经过时了，我使用以下 css 成功地做到了这一点：

.gm-style > div > div + div + div > div > div + div > div > div > div + div {
    border-radius: 10px 10px 10px 10px !important;
}

【讨论】：

【解决方案2】：

是的，似乎链接已失效，旧代码不再有效。试试我的脚本

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,
});

preview here

【讨论】：

【解决方案3】：

由于我不喜欢数到 12，我发现可拖动属性可以识别它：

jQuery:

$(document).find('#map_canvas').find( 'div[draggable="false"]' ).css('border-radius', '5px');

CSS：

#map_canvas div[draggable="false"] { border-radius: 5px }

【讨论】：

【解决方案4】：

您也可以使用 CSS 来实现。对我来说是这样的：

#map_canvass > div > div > div > div > div:not(:first-child) > div > div:nth-child(12) {
   border-radius: 10px 10px 10px 10px;
}

【讨论】：

【解决方案5】：

我认为您必须创建一个自定义信息框叠加层来更改内容以外的任何内容，如果我没记错的话，谷歌地图 infoWindow 就是一个缩放图像。

去定制！这里的例子： http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobubble/examples/example.html

这里： http://gmaps-samples-v3.googlecode.com/svn/trunk/infowindow_custom/infowindow-custom.html

【讨论】：