Javascript 如何在地图上添加google api中的按钮

我想在谷歌地图上的某个位置添加一个按钮，例如纬度：62.323907，经度：-150.109291。我可以添加按钮，但无法单击它。有没有办法在地图上添加可以单击的按钮

在CustomImageOverlay.prototype.onAdd（）中，我在这里创建div，在这里创建按钮。我为div和button提供style.cursor=“pointer”。但是，按钮显示在地图上，位置正确，但无法单击。光标仍然是可拖动的，它只允许我拖动而不允许单击

这是我的密码：

var映射；
google.maps.event.addDomListener（窗口“加载”，谷歌地图）；
var chicago={lat:41.85，液化天然气：-87.65}；
CustomImageOverlay.prototype=新建google.maps.OverlayView（）；
函数GoogleMap（）
{
var pos={lat:62.323907，lng:-150.109291}
map=new google.maps.map（document.getElementById（'googleMap'）{
中心:pos,，
缩放：8
});
覆盖=新的CustomImageOverlay（地图、pos）；
}
功能CustomImageOverlay（地图、位置）
{
this.map=map；
这个位置u=位置；
this.div=null；
这个.setMap（map）；
}
CustomImageOverlay.prototype.onAdd=函数（）{
var div=document.createElement（'div'）；
div.style.borderStyle='solid'；
div.style.borderWidth='0px'；
div.style.position='绝对'；
div.style.cursor=“指针”；
//创建按钮
var button=document.createElement（“按钮”）；
button.innerHTML=“单击此处！”；
button.style.position='absolute'；
button.style.cursor=“指针”；
div.appendChild（按钮）；
addEventListener（“单击”，函数（）{
赛特中心地图（芝加哥）；
});
this.div=div；
//将元素添加到“覆盖层”窗格。
var panes=this.getPanes（）；
窗格。覆盖层。附属物（分区）；
};
CustomImageOverlay.prototype.draw=函数（）{
var overlyprojection=this.getProjection（）；
var div=this.div_2;；
var userLatLng=new google.maps.LatLng（this.position）；
var posToPix=从LatlngToDivPixel（userLatLng）的过度投影；
div.style.left=posToPix.x+'px'；
div.style.top=posToPix.y+'px'；
div.style.width='100px'；
div.style.height='100px'；
};
#谷歌地图{
身高：100%；
}
html，正文{
身高：100%；
保证金：0；
填充：0；
}

标题
窗格上的
overlayLayer
元素不接收DOM事件（如
单击
），请将您的按钮附加到
overlayMouseTarget
窗格


覆盖层

类型：元素

此窗格包含多段线、多边形、地面覆盖和平铺层覆盖它不接收DOM事件。（窗格1）。

更改：

panes.overlayLayer.appendChild(div);

致：

代码片段：


var映射；
google.maps.event.addDomListener（窗口“加载”，谷歌地图）；
var chicago={lat:41.85，液化天然气：-87.65}；
CustomImageOverlay.prototype=新建google.maps.OverlayView（）；
函数GoogleMap（）
{
var pos={lat:62.323907，lng:-150.109291}
map=new google.maps.map（document.getElementById（'googleMap'）{
中心:pos,，
缩放：8
});
覆盖=新的CustomImageOverlay（地图、pos）；
}
功能CustomImageOverlay（地图、位置）
{
this.map=map；
这个位置u=位置；
this.div=null；
这个.setMap（map）；
}
CustomImageOverlay.prototype.onAdd=函数（）{
var div=document.createElement（'div'）；
div.style.borderStyle='solid'；
div.style.borderWidth='0px'；
div.style.position='绝对'；
div.style.cursor=“指针”；
//创建按钮
var button=document.createElement（“按钮”）；
button.innerHTML=“单击此处！”；
button.style.position='absolute'；
button.style.cursor=“指针”；
div.appendChild（按钮）；
addEventListener（“单击”，函数（）{
控制台日志（“单击”）；
赛特中心地图（芝加哥）；
});
this.div=div；
//将元素添加到“覆盖层”窗格。
var panes=this.getPanes（）；
窗格.OverlyMouseTarget.appendChild（div）；
};
CustomImageOverlay.prototype.draw=函数（）{
var overlyprojection=this.getProjection（）；
var div=this.div_2;；
var userLatLng=new google.maps.LatLng（this.position）；
var posToPix=从LatlngToDivPixel（userLatLng）的过度投影；
div.style.left=posToPix.x+'px'；
div.style.top=posToPix.y+'px'；
div.style.width='100px'；
div.style.height='100px'；
};
#谷歌地图{
身高：100%；
}
html，正文{
身高：100%；
保证金：0；
填充：0；
}

标题
将google的测试密钥添加到代码片段中，这样它就可以工作了。
panes.overlayMouseTarget.appendChild(div);