Angular 5-Google Map-在自定义叠加层上打开信息窗口

时间:2018-06-20 14:02:11

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

我需要在地图上添加多个自定义叠加层(动态)。幸运的是,我能够执行此操作,但是下一步是单击时在每个叠加层上打开信息窗口。我能够获得click事件,但现在无法打开信息窗口。这是自定义叠加层和信息窗口的代码段。

class USGSOverlay extends google.maps.OverlayView {

bounds_: any;
image_: any;
map_: any;
div_: any;
info_: any;
price_: any;

constructor(bounds, image, map, info, price) {
    super();
    this.bounds_ = bounds;
    this.image_ = image;
    this.map_ = map;
    this.div_ = null;
    this.info_ = info;
    this.price_ = price;
    this.setMap(map);
}
onAdd() {
    if (this.image_) {
        const div = document.createElement('DIV');
        div.style.position = 'absolute';
        div.className = 'arrow_box';
        div.innerHTML = '<div>' +
            '<img src="/assets/images/icons/svg/bed.svg" />' +
            '<p> ' + this.info_.bedrooms + ' |  ' + this.info_.currency + this.price_ + '</p>' +
            '</div>';
        this.div_ = div;
        const panes = this.getPanes();
        panes.overlayImage.appendChild(div);

        const contentString = '<div id="content">Hello World</div>';
        const infowindow = new google.maps.InfoWindow({
            content: contentString
        });
        const me = this;
        google.maps.event.addDomListener(div, 'click', (event) => {
            console.log(event);
            google.maps.event.trigger(me, 'click');
            infowindow.open(this.map_);
        });
    }

}

draw() {
    if (this.image_) {
        const overlayProjection = this.getProjection();
        const point = this.getProjection().fromLatLngToDivPixel(this.bounds_);
        const div = this.div_;
        div.style.left = (point.x - 10) + 'px';
        div.style.top = (point.y - 20) + 'px';
    }
}
onRemove() {
    this.div_.parentNode.removeChild(this.div_);
    this.div_ = null;
}
}

0 个答案:

没有答案