google maps V3 给多个marker添加infowindows信息
2012-12-27 20:06
246 查看
【熊猫大叔 转载请注明出处:http://blog.csdn.net/pandaflyup】
参考:https://developers.google.com/maps/documentation/javascript/events?hl=zh-CN#EventArguments 其中的“在时间侦听器中使用闭包”部分。
问题描述:
在自己的网页中嵌入google map,可以添加多个marker,但是在通过点击操作显示infowindow时,由于添加marker是用的是循环,所以每次都是在最后一个marker上显示infowindow。
问题分析:
刚开始把添加marker和infowindow放在一个函数中去了,没有使用函数功能。结果marker它会认为是一个图标,所以总是显示最后一个,而不是对应每一个。
错误代码(未能达到要求代码)
(1)map由于在两个函数里都有用到,故要设为全局变量,否则会出错;
(2)添加infowindow信息和click事件要放在单独的函数中实现,然后再调用;
参考:https://developers.google.com/maps/documentation/javascript/events?hl=zh-CN#EventArguments 其中的“在时间侦听器中使用闭包”部分。
问题描述:
在自己的网页中嵌入google map,可以添加多个marker,但是在通过点击操作显示infowindow时,由于添加marker是用的是循环,所以每次都是在最后一个marker上显示infowindow。
问题分析:
刚开始把添加marker和infowindow放在一个函数中去了,没有使用函数功能。结果marker它会认为是一个图标,所以总是显示最后一个,而不是对应每一个。
错误代码(未能达到要求代码)
function initialize() { var myLatlng = new google.maps.LatLng(39.9629, 116.3581); var myOptions = { zoom: 16, center: myLatlng, mapTypeId: google.maps.MapTypeId.ROADMAP } var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); var image='Image/webcam.png'; for(var j=0;j<latlng.length;j++){ var marker1 = new google.maps.Marker({ position: latlng[j], map: map, icon:image, title:j+"号摄像头"+"("+jingdu[j]+","+weidu[j]+")" }) google.maps.event.addListener(marker1, 'click', function(event) { get_marker_id(event.latLng); var infowindow = new google.maps.InfoWindow({ content: marker_id+"号摄像头" }); infowindow.open(map,marker1); ShowLogin(); }); } }改正后的代码:
var map; function initialize() { var myLatlng = new google.maps.LatLng(39.9629, 116.3581); var myOptions = { zoom: 16, center: myLatlng, mapTypeId: google.maps.MapTypeId.ROADMAP } map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); var image='Image/webcam.png'; for(var j=0;j<latlng.length;j++){ var marker1 = new google.maps.Marker({ position: latlng[j], map: map, icon:image, title:j+"号摄像头"+"("+jingdu[j]+","+weidu[j]+")" }) showinfomessage(marker1,j); } } function showinfomessage(marker,number) { var infowindow = new google.maps.InfoWindow( { content: number+"号摄像头" }); google.maps.event.addListener(marker, 'click', function(event) { get_marker_id(event.latLng); infowindow.open(map,marker); ShowLogin(); }); }备注:
(1)map由于在两个函数里都有用到,故要设为全局变量,否则会出错;
(2)添加infowindow信息和click事件要放在单独的函数中实现,然后再调用;
相关文章推荐
- Google Maps API:自定义Marker图标,为图标添加文字等信息
- 百度地图开发实现点击地图添加Marker并获取地址信息
- 百度地图添加多个marker,给marker添加多个信息窗口
- google maps v3 添加自定义图标(marker,overlay)
- 百度地图 循环加载marker并添加多个信息窗口,解决只显示最后一个窗口信息的问题
- 使用Supermap iClient for javascript查询多边形并添加marker和信息框
- [Gentle.Net]通过自己改造模版,添加字段信息,实现泛形列表
- h264增加SEI段信息添加自定义信息
- 在织梦中添加腾讯微博最新动态信息的方法
- 如何在myeclipse中添加作者时间等信息
- sharepoint 2010 如何给讨论板(Discussion)话题添加回复(Reply)信息(Message)
- 2.实现一个通讯录; 通讯录可以用来存储1000个人的信息,每个人的信息包括: 姓名、性别、年龄、电话、住址 提供方法: 1. 添加联系人信息 2. 删除指定联系人信息 3. 查找指定联
- QQ快捷登录需要在 AndroidManifest.xml 注册添加如下信息,sdk中提供开始配置少了回调的配置,报错
- Blog用户增值计划:添加书友会信息,免费赚取C币换畅销书及礼品
- VS 2015 自动添加头部注释,作者,版本信息
- 学习练习 读取学生信息表并添加数据
- 动态将MenuStrip控件中的信息添加到TreeView控件中(use)
- redis 集群之动态添加redis节点,删除指定ID的redis节点,以及查看redis集群中各个节点的信息
- 在Android中间件JNI层添加调试信息__android_log_print()
- jquery学习之1.22-小练习5-实现添加页面上填写信息到当前页面表格中