用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 相关文章推荐
基于Jquery的温度计动画效果
Jun 18 Javascript
动态的创建一个元素createElement及删除一个元素
Jan 24 Javascript
jQuery瀑布流插件Wookmark使用实例
Apr 02 Javascript
js跨域访问示例(客户端/服务端)
May 19 Javascript
jQuery验证插件 Validate详解
Nov 20 Javascript
javascript文本框内输入文字倒计数的方法
Feb 24 Javascript
jquery获取节点名称
Apr 26 Javascript
jQuery右侧选项卡焦点图片轮播特效代码分享
Sep 05 Javascript
JS实现设置ff与ie元素绝对位置的方法
Mar 08 Javascript
记一次webpack3升级webpack4的踩坑经历
Jun 12 Javascript
vue基础之v-bind属性、class和style用法分析
Mar 11 Javascript
Vue项目路由刷新的实现代码
Apr 17 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
thinkPHP中验证码的简单实现方法
2016/12/05 PHP
PHP封装的简单连接MongoDB类示例
2019/02/13 PHP
php中的buffer缓冲区用法分析
2019/05/31 PHP
Javascript String.replace的妙用
2009/09/08 Javascript
jquery判断浏览器类型的代码
2012/11/05 Javascript
javascript的parseFloat()方法精度问题探讨
2013/11/26 Javascript
javascript中字符串的定义示例代码
2013/12/19 Javascript
javascript中的循环语句for语句深入理解
2014/04/04 Javascript
js分页代码分享
2014/04/28 Javascript
Jquery方式获取iframe页面中的 Dom元素
2014/05/07 Javascript
jQuery 遍历函数详解
2015/07/05 Javascript
jquery模拟实现鼠标指针停止运动事件
2016/01/12 Javascript
深入浅析JS的数组遍历方法(推荐)
2016/06/15 Javascript
使用PBFunc在Powerbuilder中支付宝当面付款功能
2016/10/01 Javascript
微信小程序开发一键登录 获取session_key和openid实例
2016/11/23 Javascript
详解基于electron制作一个node压缩图片的桌面应用
2019/01/29 Javascript
javascript面向对象三大特征之封装实例详解
2019/07/24 Javascript
[37:02]OG vs INfamous 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
使用Python进行新浪微博的mid和url互相转换实例(10进制和62进制互算)
2014/04/25 Python
在Django的视图中使用form对象的方法
2015/07/18 Python
Python爬取十篇新闻统计TF-IDF
2018/01/03 Python
Python判断一个list中是否包含另一个list全部元素的方法分析
2018/12/24 Python
python 定义类时,实现内部方法的互相调用
2019/12/25 Python
Python -m参数原理及使用方法解析
2020/08/21 Python
CSS3让登陆面板3D旋转起来
2016/05/03 HTML / CSS
HTML5中form如何关闭自动完成功能的方法
2018/07/02 HTML / CSS
卡西欧G-SHOCK英国官网: 防水防震手表
2018/01/08 全球购物
售后主管岗位职责
2013/12/08 职场文书
物理专业本科生自荐信
2014/01/30 职场文书
毕业生自荐书
2014/02/02 职场文书
乡镇党建工作汇报材料
2014/08/14 职场文书
高二学年自我鉴定范文(2篇)
2014/09/26 职场文书
领导干部群众路线对照检查材料
2014/11/05 职场文书
教师思想工作总结2015
2015/05/13 职场文书
html实现随机点名器的示例代码
2021/04/02 Javascript
Java面试题冲刺第十八天--Spring框架3
2021/08/07 面试题