openalyers为自定义覆盖物overlay添加点击事件
在项目的实际需求中，勾选某个小区的地址，需要在地图上定义小区的位置，即在地图上添加overlay覆盖物，点击overlay覆盖物展示该小区的三维场景，刚开始的实现方法点击事件不生效，详细代码如下所示：
<div id="map" style="width: 100%">
<div id="anchor">
<img src="./img/point_search.png" style="display:none;" />
</div>
</div>
<script type="text/javascript">
var map = new ol.Map({
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
target: 'map',
view: new ol.View({
center: [117.210813092,39.0839299033],
projection:"EPSG:4326",
zoom: 14
})
});
$("#anchor img").css("display","block");
var anchor = new ol.Overlay({
element:document.getElementById("anchor")
});
anchor.setPosition([117.210813092,39.0839299033]);
map.addOverlay(anchor);
//为地图覆盖区添加点击事件
anchor.on("click",function(){ //不生效
alert("点击地图覆盖物!");
});由以上代码可以看出，为自定义覆盖物overlay添加点击事件并不生效，然而从Stack Overflow上发现了解决办法，如下所示：
不应该给overlay添加click事件，而应该给html元素添加click事件，因此把上面的实现代码改写成下面的形式，程序就可以跑了：
$("#anchor").on("click",function(){//生效
alert("点击地图覆盖物!");
});