当前位置: 首页 > 编程笔记 >

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

齐文林
2023-03-14
本文向大家介绍用js闭包的方法实现多点标注冒泡示例,包括了用js闭包的方法实现多点标注冒泡示例的使用技巧和注意事项,需要的朋友参考一下
这两天在做地图这块,一点点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(); 

} 


} 
 类似资料:
  • 本文向大家介绍JS阻止事件冒泡行为和闭包的方法,包括了JS阻止事件冒泡行为和闭包的方法的使用技巧和注意事项,需要的朋友参考一下 阻止事件冒泡行为,要是不阻止的话,点击div的时候也会同时触发body事件 html代码 css代码 js代码 以上所述是小编给大家介绍的JS阻止事件冒泡行为和闭包的方法的相关知识,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家

  • 本文向大家介绍汇编实现冒泡排序的方法示例,包括了汇编实现冒泡排序的方法示例的使用技巧和注意事项,需要的朋友参考一下 冒泡排序算法的运作如下:(从后往前) 1.比较相邻的元素。如果第一个比第二个大,就交换他们两个。 2.对每一对相邻元素作同样的工作,从开始第一对到结尾的最后一对。在这一点,最后的元素应该会是最大的数。 3.针对所有的元素重复以上的步骤,除了最后一个。 4.持续每次对越来越少的元素重复

  • 本文向大家介绍python冒泡排序简单实现方法,包括了python冒泡排序简单实现方法的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了python冒泡排序简单实现方法。分享给大家供大家参考。具体实现方法如下: 运行结果如下: [115, 14, 246, 125, 94, 78, 275, 163, 64, 72, 245, 1, 97, 53, 86, 270, 137, 69, 74,

  • 本文向大家介绍go实现冒泡排序的示例代码,包括了go实现冒泡排序的示例代码的使用技巧和注意事项,需要的朋友参考一下 冒泡排序: (Bubble Sorting)基本思想是通过对待排序序列从后向前(从下标较大的元素开始)以此比较相邻元素的排序码,若发现逆序则交换,使排序码较小的元素逐渐从后补移向前部(从下标较大的单元移向单位较小的单元),就像水底的气泡一样逐渐向上冒。 因为排序的过程中,各元素不断的

  • 本文向大家介绍Objective-C实现冒泡排序算法的简单示例,包括了Objective-C实现冒泡排序算法的简单示例的使用技巧和注意事项,需要的朋友参考一下 简介 冒泡算法是一种基础的排序算法,这种算法会重复的比较数组中相邻的两个元素。如果一个元素比另一个元素大(小),那么就交换这两个元素的位置。重复这一比较直至最后一个元素。这一比较会重复n-1趟,每一趟比较n-j次,j是已经排序好的元素个数。

  • 提示冒泡受启发自Jason Frame开发的极好的jQuery Tipsp插件,它是一个改进版本,不依赖于图片,使用CSS3实现动画,利用data-attribute实现本地化标题存储。 概述 在使用提示冒泡插件的时候你需要知道这些: 提示冒泡依赖第三方库Tether实现定位。你必须在bootstrap.js之前调用 tether.min.js,才能使提示冒泡起作用。 出于性能的原因,提示冒泡是选