自定义HTML标记上的Google Maps Infobox

时间:2016-02-26 22:44:23

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

我在点击叠加层(自定义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/

2 个答案:

答案 0 :(得分:1)

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

来自the documentation

  

打开(地图?:地图| StreetViewPanorama,锚?:MVCObject)

     

返回值:无

     

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

答案 1 :(得分:0)

我没有在函数调用中携带正确的 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);
};