问题描述
我正在尝试处理 google.maps.infoWindow 中按钮的点击事件。我试图通过 infoWindow 内容将函数名称传递给 onClick 但没有奏效。所以,我转移到 getElementById
但也没有成功。getElementById("polyButton")
的返回值为 null(无法读取 null 的属性 'addEventListener')。
代码:
fpolylineHandler(event) {
console.log("handler",event);
}
infopolyline(polyline,map,maps,event) {
var infowindow = new maps.InfoWindow({
content: " ",});
infowindow.setContent(
"<div style='color: black'>" +
"<p>Event Name: " +
"</p>" +
"<p>Event Type: " +
"</p>" +
"<p>Cause: " +
"</p>" +
"<p>Date: " +
"</p>" +
"<p>Time: " +
"</p>" +
"<button id='polyButton'>Click me</button>" +
"</div>"
);
var btn = document.getElementById("polyButton");
btn.addEventListener("click",this.fpolylineHandler.bind(this));
infowindow.setPosition(event.latLng);
infowindow.open(map,polyline);
}
作为参考,我尝试像这样使用 onClick
:
...
infowindow.setContent(
"<div style='color: black'>" +
"<p>Event Name: " +
"</p>" +
"<p>Event Type: " +
"</p>" +
"<p>Cause: " +
"</p>" +
"<p>Date: " +
"</p>" +
"<p>Time: " +
"</p>" +
"<button id='polyButton'onClick='this.fpolylineHandler'>Click me</button>" +
"</div>"
);
...
有趣的部分是在使用 onClick='this.fpolylineHandler()'
时出现了一个错误,指出它不是一个函数。在上面的例子中,什么都不做。
解决方法
即使在挂载到 dom 后阅读,该元素也不存在于地图上。所以,为了解决这个问题,我们需要添加一个dom监听器:
maps.event.addListener(infowindow,"domready",function () {
document.getElementById("polyButton").onclick=fpolylineHandler
});