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

Posted 2023-02-23

【中文标题】如何为谷歌地图信息窗口设置边界半径

【英文标题】：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?。它专门讨论了设置圆角半径。

【参考方案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