我需要在地图上添加多个自定义叠加层(动态)。幸运的是,我能够执行此操作,但是下一步是单击时在每个叠加层上打开信息窗口。我能够获得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;
}
}