如何更改谷歌地图信息窗口关闭按钮的位置？

Question

我已经阅读了几篇文章并浪费了很多时间来做到这一点。 我的 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);
    }
}

我已经推荐了Google Map v3 InfoBox 和 closeBox以及Google Map API v3 ~ 只需关闭一个信息窗口？ 但没有什么对我有用。

提前感谢您提供有利的解决方案..！

Answer 1

似乎问题不在于如何更改关闭按钮的位置，而在于如何打开InfoBox 。 您正在使用InfoBox选项调用InfoWindow构造函数，但您必须使用适当的选项创建InfoBox 。

从关于 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);
}

请参阅jsbin 的完整示例。 closeBoxMargin设置为“10px 20px 2px 2px”，因此关闭框的右侧应该有 20px 的边距。

Answer 2

花了一段时间，但我最终想通了，下面的代码需要修改为您自己的谷歌地图标签 ID。

下面的代码覆盖了一个透明的 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;
}

Answer 3

这可以通过 CSS 完成：

#map div[role="dialog"] button[title="Close"] {
    right: 10px !important;
    top: 10px !important;
}

您需要将#map替换为您的地图容器元素。

如果 Google 更改标记，这可能不再起作用，并且它还可能针对其他类似的对话框类型元素（可能是也可能不是您想要的）。