Question

我在点击叠加层（自定义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);期待一个标记，我给它＆＃34; div＆＃34;。如何调整此功能以使其接受我的div？

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

Answer 1

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

来自the documentation：

打开（地图？：地图| StreetViewPanorama，锚？：MVCObject）

返回值：无

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

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

自定义HTML标记上的Google Maps Infobox

2 个答案: