javascript 如何更改谷歌地图信息窗口关闭按钮的位置？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24074448/
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 to change Google map infowindow close button position?
提问by MaDu_LK
I have gone through several articals and wasted a lot of time to do this. My javascript seems like below. I have already used closeBoxMargin property but it is not working.
我已经浏览了几篇文章并浪费了很多时间来做这件事。我的 javascript 如下所示。我已经使用了 closeBoxMargin 属性，但它不起作用。
function addBasicInfoWindow(map, marker, contentStr) {
var infoBoxOptions = {
content: contentStr,
pixelOffset: new google.maps.Size(0, 15),
disableAutoPan: false,
closeBoxMargin: "10px 0px 2px 2px",
closeBoxURL: "http://localhost:8080/DummyMap/images/mapClose.png",
infoBoxClearance: new google.maps.Size(1, 1),
enableEventPropagation: false,
};
//alert(infoBox.innerHTML);
try {
var infowindow = new google.maps.InfoWindow(infoBoxOptions);
infowindow.open(map,marker);
} catch (ex) {
alert(ex);
}
}
I have reffered Google Map v3 InfoBox and closeBoxand Google Map API v3 ~ Simply Close an infowindow?but nothing works for me.
我已经推荐了Google Map v3 InfoBox 和 closeBox以及Google Map API v3 ~ 只需关闭一个信息窗口？但没有什么对我有用。
Thanx in advance for a favorable solution..!
提前感谢一个有利的解决方案..！
采纳答案by Anto Jurkovi?
It seems that problem is not how to change close button position but how to open InfoBox. You are calling InfoWindowconstructor with options for InfoBoxbut you have to create InfoBoxwith proper options instead.
似乎问题不在于如何更改关闭按钮的位置，而在于如何打开InfoBox. 您正在调用InfoWindow带有选项的构造函数，InfoBox但您必须InfoBox使用适当的选项创建。
Arranged from google example about infobox:
从关于信息框的谷歌示例中安排：
function addBasicInfoWindow(map, marker, contentStr) {
var boxText = document.createElement("div");
boxText.style.cssText = "border: 1px solid black; margin-top: 8px; background: yellow; padding: 5px;";
boxText.innerHTML = "City Hall, Sechelt<br>British Columbia<br>Canada";
var myOptions = {
content: boxText,
disableAutoPan: false,
maxWidth: 0,
pixelOffset: new google.maps.Size(-140, 0),
zIndex: null,
boxStyle: {
background: "url('http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/examples/tipbox.gif') no-repeat",
opacity: 0.75,
width: "280px"
},
closeBoxMargin: "10px 20px 2px 2px",
closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif",
infoBoxClearance: new google.maps.Size(1, 1),
isHidden: false,
pane: "floatPane",
enableEventPropagation: false
};
google.maps.event.addListener(marker, "click", function (e) {
ib.open(map, this);
});
var ib = new InfoBox(myOptions);
ib.open(map, marker);
}
See complete example at jsbin. closeBoxMarginis set to "10px 20px 2px 2px", so close box should have 20px margin on the right side.
请参阅jsbin 中的完整示例。closeBoxMargin设置为“10px 20px 2px 2px”，所以关闭框的右侧应该有 20px 的边距。
回答by Daisy Diblett
it took a while, but I eventually figured it out, the code below will need to be amended for your own google map tag id.
花了一段时间，但我最终想通了，下面的代码需要为您自己的谷歌地图标签 ID 进行修改。
the following code overwrites a transparent gif which is the click area with an image of your choice and at the right position - you'll need to play with rightand topto get it right for your infoWindow
以下代码覆盖了一个透明的 gif，它是带有您选择的图像的点击区域，并且位于正确的位置 - 您需要使用right并top使其适合您infoWindow
#MyGoogleMapTag > div > div > div:nth-child(1) > div:nth-child(4) > div:nth-child(4) > div > img {
right: 45px !important;
top: 7px !important;
background-image:url("http://appsavvy.net/close.png") !important;
}
