用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 表单验证常见正则
Sep 28 Javascript
jQuery get和post 方法传值注意事项
Nov 03 Javascript
基于JQuery框架的AJAX实例代码
Nov 03 Javascript
用js实现计算加载页面所用的时间
Apr 02 Javascript
javaScript复制功能调用实现方案
Dec 13 Javascript
jquery数组封装使用方法分享(jquery数组遍历)
Mar 25 Javascript
JS中产生标识符方式的演变
Jun 12 Javascript
Jquery跨域获得Json的简单实例
May 18 Javascript
AngularJs 国际化(I18n/L10n)详解
Sep 01 Javascript
浅析jsopn跨域请求原理及cors(跨域资源共享)的完美解决方法
Feb 06 Javascript
webpack源码之loader机制详解
Apr 06 Javascript
vue如何安装使用Quill富文本编辑器
Sep 21 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
PHP MVC模式在网站架构中的实现分析
2010/03/04 PHP
php判断用户是否手机访问代码
2015/06/08 PHP
php获取linux命令结果的实例
2017/03/13 PHP
PHP实现小程序批量通知推送
2018/11/27 PHP
[原创]后缀就扩展名为js的文件是什么文件
2007/12/06 Javascript
javascript showModalDialog 多层模态窗口实现页面提交及刷新的代码
2009/11/28 Javascript
解析Jquery中如何把一段html代码动态写入到DIV中(实例说明)
2013/07/09 Javascript
jquery JSON的解析方式示例介绍
2014/07/27 Javascript
javascript实现延时显示提示框特效代码
2016/04/27 Javascript
浅谈javascript:两种注释,声明变量,定义函数
2016/09/29 Javascript
JS弹性运动实现方法分析
2016/12/15 Javascript
JS返回只包含数字类型的数组实例分析
2016/12/16 Javascript
JavaScript实现二分查找实例代码
2017/02/22 Javascript
Angularjs处理页面闪烁的解决方法
2017/03/09 Javascript
详解如何在Vue2中实现组件props双向绑定
2017/03/29 Javascript
为Jquery EasyUI 组件加上清除功能的方法(详解)
2017/04/13 jQuery
利用express启动一个server服务的方法
2017/09/17 Javascript
JavaScript实现的九种排序算法
2019/03/04 Javascript
vue操作动画的记录animate.css实例代码
2019/04/26 Javascript
解决layui富文本编辑器图片上传无法回显的问题
2019/09/18 Javascript
vue路由拦截器和请求拦截器知识点总结
2019/11/08 Javascript
vue实现带过渡效果的下拉菜单功能
2020/02/19 Javascript
Jquery 获取相同NAME 或者id删除行操作
2020/08/24 jQuery
Vertx基于EventBus发送接受自定义对象
2020/11/16 Javascript
利用Python如何实现一个小说网站雏形
2018/11/23 Python
Django 静态文件配置过程详解
2019/07/23 Python
python命令 -u参数用法解析
2019/10/24 Python
np.newaxis 实现为 numpy.ndarray(多维数组)增加一个轴
2019/11/30 Python
python下载卫星云图合成gif的方法示例
2020/02/18 Python
详解淘宝H5 sign加密算法
2020/08/25 HTML / CSS
在线吉他课程,学习如何弹吉他:Fender Play
2019/02/28 全球购物
2016党校学习心得体会
2016/01/07 职场文书
2016学习医德医风心得体会
2016/01/25 职场文书
2019消防宣传标语!
2019/07/10 职场文书
JS 4个超级实用的小技巧 提升开发效率
2021/10/05 Javascript
什么是动态刷新率DRR? Windows11动态刷新率功能介绍
2021/11/21 数码科技