用js闭包的方法实现多点标注冒泡示例


Posted in Javascript onMay 29, 2014

这两天在做地图这块,一点点js代码,各种坑。第一次接触js,各种难,下面就这几天的研究做一些总结,求坑
在事件监听器中使用闭包

在执行事件监听器时,通常可取的做法是将私有数据和持久性数据附加到对象中。JavaScript 不支持“私有”实例数据,但是支持允许内部函数访问外部变量的闭包。在事件监听器中,闭包非常适用于访问通常不附加到发生事件的对象的变量。

以下示例在事件监听器中使用了函数闭包将加密讯息分配给一组标记。点击每个标记将会看到加密讯息的一部分,该讯息并不包含在标记本身内。

var map; 
function initialize() { 
var myLatlng = new google.maps.LatLng(-25.363882,131.044922); 
var mapOptions = { 
zoom: 4, 
center: myLatlng, 
mapTypeId: google.maps.MapTypeId.ROADMAP 
} map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions); 
// Add 5 markers to the map at random locations. 
var southWest = new google.maps.LatLng(-31.203405,125.244141); 
var northEast = new google.maps.LatLng(-25.363882,131.044922); 
var bounds = new google.maps.LatLngBounds(southWest,northEast); 
map.fitBounds(bounds); 
var lngSpan = northEast.lng() - southWest.lng(); 
var latSpan = northEast.lat() - southWest.lat(); 
for (var i = 0; i < 5; i++) { 
var location = new google.maps.LatLng(southWest.lat() + latSpan * Math.random(), 
southWest.lng() + lngSpan * Math.random()); 
var marker = new google.maps.Marker({ 
position: location, 
map: map 
}); 
var j = i + 1; 
marker.setTitle(j.toString()); 
attachSecretMessage(marker, i); 
} 
} 
// The five markers show a secret message when clicked 
// but that message is not within the marker's instance data. 
function attachSecretMessage(marker, number) { 
var message = ["This","is","the","secret","message"]; 
var infowindow = new google.maps.InfoWindow( 
{ content: message[number], 
size: new google.maps.Size(50,50) 
}); 
google.maps.event.addListener(marker, 'click', function() { 
infowindow.open(map,marker); 
}); 
}

这段代码是从google官方里面复制下来的

接下来我要实现从数据库中读取经纬度、地址信息,在google map上进行标注并单击标注出现信息

要实现多点标注,以上代码可以参考

<script type="text/javascript" > 
var map; 
window.onload =function load() { var number='<%=number %>';//获取后台cs的pubilc的number的值 
var address = new Array() 
var weidu=new Array(); 
var jingdu=new Array(); 
var chepai = new Array(); 
<% for(int i=0;i<number;i++){ %> 
weidu.push('<%=lan[i]%>');//从后台cs获取经纬度的值 
jingdu.push('<%=lon[i]%>'); 
address.push('<%=addr[i]%>'); 
chepai.push('<%=carnum[i] %>'); 
// var wei ; 
// wei = chepai['<%=i%>']; 
// alert(wei); 
<% } %> 
var Latlng = new google.maps.LatLng(weidu[0], jingdu[0]); 
// var myLatlng = new google.maps.LatLng(25.273566, 110.290195); 
var myOptions = { 
zoom: 8, 
center: Latlng, 
mapTypeId: google.maps.MapTypeId.ROADMAP 
}; 
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);////初始化一个地图实例 
for(var j=0;j<number;j++) //这里卡了好久,原因是js的类型只有var;把js和cs弄混了一直用到《% %>,其实单纯的js不需要,跟C差不多就可以了 
{ 
var lat = weidu[j]; 
var lng = jingdu[j]; 
var addre = address[j]; 
var chepaihao = chepai[j]; 
// alert(j); 
// alert(lat); 
// var image = 'Image/webcam.png'; 
//设置标志点 
var myLatlng = new google.maps.LatLng(weidu[j ], jingdu[j ]); 
var h = chepaihao; 
var tit = h.toString(); 
var marker = new google.maps.Marker({ 
position: myLatlng, 
map: map, 
// icon: "http://google-maps-icons.googlecode.com/files/yellow08.png", 
// icon: image, //通过icon可以设定自己想显示的图标,不设置则显示Google map默认的图标 
title: tit //title表示鼠标放到marker上要显示的值。 
}); 
attachSecretMessage(marker, j,addre,lat,lng); 
} 
} 
function attachSecretMessage(marker, number,addre1,lat1,lng1) { 
// var message = ["This", "is", "the", "secret", "message"]; 
var infowindow = new google.maps.InfoWindow( 
{ content: "<span style='font-size:15px'><b>地址: </b>" + addre1 + "<br>"+ "经纬度:"+ lat1 + ","+ lng1 +"</span>", 
size: new google.maps.Size(50, 50) 
}); 
// infowindow.setContent("地址:"+ addre1 +"经度:" +lat1 + "纬度:"+lng1); 
//点击弹出信息窗口 
google.maps.event.addListener(marker, 'click', function () { 
infowindow.open(map, marker); 
}); 
} 
</script>

cs后端代码:
using System; 
using System.Collections.Generic; 
using System.Linq; 
using System.Web; 
using System.Web.UI; 
using System.Web.UI.WebControls; using System.Web.UI.HtmlControls; 
using System.Data.SqlClient; 
public partial class Default2 : System.Web.UI.Page 
{ 
public double[] la = new double[25]; 
public double[] ln = new double[25]; 
public int[] id = new int[25]; 
public string[] addr = new string[25]; 
public int number; 

protected void Page_Load(object sender, EventArgs e) 
{ 
string mycnnConnectionString1 = System.Configuration.ConfigurationManager.ConnectionStrings["testconect"].ConnectionString; //创建连接字符串 
SqlConnection mycnn1 = new SqlConnection(mycnnConnectionString1); 
mycnn1.Open(); 
SqlCommand cmd1 = new SqlCommand("select L_ID,L_Lantitude,L_Longitude,L_Address from LatestPosition ", mycnn1); 
SqlDataReader dr1 = cmd1.ExecuteReader(); 
int k2 = 0; 
int k3 = 0; 
int k4 = 0; 
int k1 = 0; 
// string buf1 = ""; 
double buf2 = 0; 
double buf3 = 0; 
int buf4 = 0; 
string buf1 = "0"; 
while (dr1.Read()) 
{ 
//lat 
buf2 = (double)dr1["L_Lantitude"]; 
la[k2] = buf2; 
k2++; 
//lng 
buf3 = (double)dr1["L_Longitude"];///数据库读取float型的数据要用double 
ln[k3] = buf3; 
k3++; 
//id 
buf4 = (int)dr1["L_ID"]; 
id[k4] = buf4; 
k4++; 
buf1 = dr1["L_Address"].ToString(); 
addr[k1] = buf1; 
k1++; 
} 
number = k4; 
dr1.Close(); 
mycnn1.Close(); 
} 

}
Javascript 相关文章推荐
javascript 一个自定义长度的文本自动换行的函数
Aug 19 Javascript
js 返回时间戳所对应的具体时间
Jul 20 Javascript
JS实现控制表格单元格垂直对齐的方法
Mar 30 Javascript
jQuery实现网页顶部固定导航效果代码
Dec 24 Javascript
超漂亮的Bootstrap 富文本编辑器summernote
Apr 05 Javascript
利用Jquery队列实现根据输入数量显示的动画
Sep 01 Javascript
Node.js调用fs.renameSync报错(Error: EXDEV, cross-device link not permitted)
Dec 27 Javascript
Vue中div contenteditable 的光标定位方法
Aug 25 Javascript
vue-cli项目无法用本机IP访问的解决方法
Sep 20 Javascript
解决Vue中引入swiper,在数据渲染的时候,发生不滑动的问题
Sep 27 Javascript
详解小程序毫秒级倒计时(适用于拼团秒杀功能)
May 05 Javascript
JS实现简单移动端鼠标拖拽
Jul 23 Javascript
关于JavaScript中name的意义冲突示例介绍
May 29 #Javascript
window.open()详解及浏览器兼容性问题示例探讨
May 29 #Javascript
javaScript年份下拉列表框内容为当前年份及前后50年
May 28 #Javascript
href下载文件根据id取url并下载
May 28 #Javascript
javascript自定义的addClass()方法
May 28 #Javascript
使用insertAfter()方法在现有元素后添加一个新元素
May 28 #Javascript
用html+css+js实现的一个简单的图片切换特效
May 28 #Javascript
You might like
历史证明,懒惰才是推动科学发展技术进步的动力
2021/03/02 无线电
在PHP中使用模板的方法
2008/05/24 PHP
一个PHP验证码类代码分享(已封装成类)
2011/07/17 PHP
php实现的美国50个州选择列表实例
2015/04/20 PHP
thinkPHP框架实现多表查询的方法
2018/06/14 PHP
jquery中动态效果小结
2010/12/16 Javascript
JQuery中对Select的option项的添加、删除、取值
2013/08/25 Javascript
JS判断对象是否存在的10种方法总结
2013/12/23 Javascript
使用jQuery重置(reset)表单的方法
2014/05/05 Javascript
从零学JSON之JSON数据结构
2014/05/19 Javascript
JavaScript使用cookie实现记住账号密码功能
2015/04/27 Javascript
使用Node.js为其他程序编写扩展的基本方法
2015/06/23 Javascript
PHP结合jQuery实现红蓝投票功能特效
2015/07/22 Javascript
JS实现兼容性好,带缓冲的动感网页右键菜单效果
2015/09/18 Javascript
JavaScript面向对象编写购物车功能
2016/08/19 Javascript
bootstrap可编辑下拉框jquery.editable-select
2017/10/12 jQuery
js 两数组去除重复数值的实例
2017/12/06 Javascript
Vue组件通信的四种方式汇总
2018/02/08 Javascript
JS/HTML5游戏常用算法之碰撞检测 包围盒检测算法详解【矩形情况】
2018/12/13 Javascript
[01:25]2015国际邀请赛最佳短片奖——斧王《拆塔英雄:天赋异禀》
2015/09/22 DOTA
[36:16]完美世界DOTA2联赛PWL S3 access vs Rebirth 第一场 12.19
2020/12/24 DOTA
Python面向对象类的继承实例详解
2018/06/27 Python
对pandas的行列名更改与数据选择详解
2018/11/12 Python
浅谈pycharm下找不到sqlalchemy的问题
2018/12/03 Python
Python3利用Dlib实现摄像头实时人脸检测和平铺显示示例
2019/02/21 Python
使用 Python 玩转 GitHub 的贡献板(推荐)
2019/04/04 Python
python解释器spython使用及原理解析
2019/08/24 Python
Python之数据序列化(json、pickle、shelve)详解
2019/08/30 Python
jupyter实现重新加载模块
2020/04/16 Python
CSS3 media queries + jQuery实现响应式导航
2016/09/30 HTML / CSS
CSS中越界问题的经典解决方案【推荐】
2016/04/19 HTML / CSS
客户经理竞聘演讲稿
2014/05/15 职场文书
优秀大学生自荐信
2014/06/09 职场文书
学生安全责任书范本
2014/07/24 职场文书
2016年幼儿园教师政治学习心得体会
2016/01/23 职场文书
Python中文纠错的简单实现
2021/07/07 Python