由于项目需求缘由,须要实现如下功能:
- 点击地图上的每一个坐标标记后显示其坐标信息
- 当有多个点时,地图上只能存在一个infowindow
解决思路以下:
首先给出google地图infowindow的一个示例用法(https://developers.google.com/maps/documentation/javascript/examples/event-closure?hl=zh-cn)
示例中为每一个坐标点添加了点击事件,弹出一个infowindow,在此窗口上显示信息,具体不在赘述,示例中得源码很简单。
但是咱们会发现,当咱们点击一个点弹出infowindow,而后不去手动关闭,在点击下一个点时,先前的那个ingowindow仍然留在地图上,当点击的不少时,就会是这种效果了:
相信这会让使用这套系统的人疯掉的,那么如何解决这个问题呢?很简单,每当咱们打开一个新的infowindow时就关闭上一个infowindow,查询google地图API,发现infowindow给开发人员提供了close()这个方法,这下一切事情就好办了。解决思路:
首先须要一个存取infowindow的数组,还有一个存储上一个infowindow的索引,分别取名为infowindows和lastindex=-1;而后,每当new一个infowindow时,将其存入infowindows,在为坐标点添加点击事件时,首先检查索引值,若为-1,则跳出if语句,若不为-1,则将该索引下的infowindow关闭,以后打开新的infowindow,并将新的索引值附给lastindex,方便下一次点击事件的执行,Demo和代码以下:javascript
var infowindows = []; var lastIndex=-1; //marker是一个坐标标记点 //只需在一个marker数组的每一次循环添加时调用便可 function addMessage(marker) { var message="hello" var infowindow = new google.maps.InfoWindow({ content : message }); infowindows.push(infowindow); google.maps.event.addListener(marker, 'click', function() { if(lastIndex!=-1) { infowindows[lastIndex].close(); } infowindow.open(marker.get('map'), marker); lastIndex=infowindows.indexOf(infowindow,0); }); }
么西期待你的见解和意见,欢迎交流java