自定义HTML标记上的Google Maps Infobox

Question

我正在尝试单击叠加层（自定义HTML标记）后打开一个信息框。

该地图显示了一个典型的标记和一个客户HTML标记。 当我单击典型标记时，信息框将正确打开。 当我单击自定义HTML标记时，信息框不会打开，错误为msg： 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/

Answer 1

要将任何内容用作标记的锚点，它需要公开latLng position属性和可选的anchorPoint属性。

从文档中：

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

返回值：无

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

Answer 2

我没有携带正确的LOC（纬度/经度）和映射到函数调用。

这是修改后的侦听器：

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 个解决方案

解决方案1
1 2016-02-26 23:19:13

解决方案2
0 2016-02-27 00:12:39

自定义HTML标记上的Google Maps Infobox

问题描述

2 个解决方案

解决方案1 1 2016-02-26 23:19:13

解决方案2 0 2016-02-27 00:12:39

解决方案1
1 2016-02-26 23:19:13

解决方案2
0 2016-02-27 00:12:39