自定义 HTML 标记上的 Google 地图信息框答案

【问题标题】：Google Maps Infobox on Custom HTML Marker自定义 HTML 标记上的 Google 地图信息框
【发布时间】：2016-06-10 08:10:33
【问题描述】：

我试图在单击覆盖（自定义 HTML 标记）后打开一个信息框。

此地图显示了一个典型的标记和一个客户 HTML 标记。当我单击典型标记时，信息框会正确打开。当我单击自定义 HTML 标记时，信息框不会打开并显示错误消息：TypeError: anchor.getPosition is not a function。这与我传递给infobox.open() 的参数不正确有关。它需要一个标记，但由于我单击的是叠加层（自定义 HTML 标记），因此传递的参数不正确。

如何调整infobox.open() 函数，使其接受我的叠加层作为参数？

<!DOCTYPE html>
<html>
<style>

#map{
    height: 600px;
    width: 600px;
}

</style>
<body>
<div id="map"></div>

<script src="https://maps.google.com/maps/api/js?sensor=false"></script>
<script src="https://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/src/infobox.js"></script>
<script src="....path/to/custom-html-markers-google-maps.js"></script>
<script>

var infobox = new InfoBox({
    disableAutoPan: false,
    maxWidth: 300,
    pixelOffset: new google.maps.Size(-75, -70),
    zIndex: null,
    boxStyle: {width: '150px'},
    infoBoxClearance: new google.maps.Size(15, 50)
});


function initialize() {

    var loc =        new google.maps.LatLng(-33.89, 151.26);
    var locMarker =  new google.maps.LatLng(-33.89, 151.23);

    var map = new google.maps.Map(document.getElementById("map"), {
        zoom: 12,
        center: loc,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    //This works FINE.. It sets the marker and infobox listener
    var marker = new google.maps.Marker({
        map: map,
        position: locMarker,
        visible: true
    });

    google.maps.event.addListener(marker, 'click', function() {
        infobox.setContent('<div style="background-color:yellow">This is<br>an infobox.</div>');
        infobox.open(map, this);
    });


    //Overlay from: http://humaan.com/custom-html-markers-google-maps/
    var overlay = new CustomMarker(loc, map, {marker_id: '123'});
}

google.maps.event.addDomListener(window, 'load', initialize);
</script>
</body>
</html>

自定义 HTML 标记脚本的一部分：

google.maps.event.addDomListener(div, "click", function(event) {

    infobox.setContent('<div style="background-color:yellow">Hi there</div>');
    infobox.open(map, this);  //*******THIS IS THE PROBLEM********

    google.maps.event.trigger(self, "click");
});

我的问题是infobox.open(map, this); 期待一个标记，我给它“div”。如何调整此函数以使其接受我的 div？

完整脚本：http://humaan.com/custom-html-markers-google-maps/

【问题讨论】：

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

【解决方案1】：

要将任何东西用作标记的锚点，它需要公开一个 latLng 位置属性和一个可选的 anchorPoint 属性。

来自the documentation：

open(map?:Map|StreetViewPanorama, anchor?:MVCObject)

返回值：无

在给定地图上打开此信息窗口。可选地，信息窗口可以与锚相关联。在核心 API 中，唯一的锚点是 Marker 类。但是，锚点可以是任何 MVCObject，它公开 LatLng 位置属性和可选的用于计算 pixelOffset 的 Point anchorPoint 属性（请参阅 InfoWindowOptions）。 anchorPoint 是从锚点位置到信息窗口尖端的偏移量。

【讨论】：

谢谢，我修改了函数中携带的LatLng位置和地图变量。

【解决方案2】：

我没有在函数调用中携带正确的 loc(lat/lng) 和 map。

这是修改后的监听器：

google.maps.event.addDomListener(div, "click", function(event) {

    var map =   self.getMap();
    var loc =   self.latlng;

    infobox.setContent('<div style="background-color:yellow">Hi there</div>');
    infobox.openRevised(map, this, loc);

    google.maps.event.trigger(self, "click");
});

这里是修改后的infobox.open()函数：

InfoBox.prototype.openRevised = function (map, anchor, loc) {

    if (anchor) {

        this.position_ = loc;
    }

    this.setMap(map);
};

【讨论】：