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 and closeBox和Google Map API v3 ~ Simply Close an infowindow?，但对我没有任何作用。

Thanx提前获得有利的解决方案..！

Answer 1

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

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

查看完整的example at 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;
}

如何更改Google地图infowindow关闭按钮位置？

2 个答案: