百度地图中怎么对多个覆盖物进行指定监控
1、百度搜索“百度地图api”,找到百度地图api的首页,点击web开发、jsAPI大众版,进入地图实例
2、随便点击一个实例进入,在左边导航栏中找覆盖物示例,此处我们可以参考下获取覆盖物信息这个页面。
3、将页面内容复制到自己项目的html页面中。将包含地理经纬度以及半径的json数据循环添加圆形覆盖物。
4、生成覆盖物后我们用addEventListener对其进行事件监控,本文是为了实现当鼠标进入圆形覆盖物中时改变覆盖物的颜色,当鼠标离开的时候将覆盖物的颜色还原。
5、用getOverlays函数获取当前地图中所有的覆盖物信息,可以调试看具体信息。按照正常思路来说应该直接写成这样就可以了: for (var i = 0; i < vers.length; i++) { vers[i].addEventListener('mouseover', function () { this.setFillColor("red"); }); vers[i].addEventListener('mouseout', function () { this.setFillColor("yellow"); }); }
6、可是,实际操作中发现,for循环在一开始就已经走完了,所以监听事件监听到的只是getOverlays中最后一个覆盖物,改变的也只是改变这个覆盖物而已,和我们想要实现的有出入。
7、我们希望实现的是点击某一个覆盖物,监听到该覆盖物。这时候,我们需要进行一次事件闭包。像这样:var vers = map.getOverlays(); for (var i = 0; i < vers.length; i++) { (function () { var index = i; vers[i].addEventListener('mouseover', function () { this.setFillColor("red"); }); vers[i].addEventListener('mouseout', function () { this.setFillColor("yellow"); }); })(); }
8、这样的话就可以实现我们想要实现的效果啦。