快捷導航

用js閉包的方法實現(xiàn)多點標注冒泡示例

更新時間：2014年05月29日 15:29:13 作者：

這篇文章主要介紹了用js閉包的方法實現(xiàn)多點標注冒泡,需要的朋友可以參考下

這兩天在做地圖這塊，一點點js代碼，各種坑。第一次接觸js，各種難，下面就這幾天的研究做一些總結(jié)，求坑
在事件監(jiān)聽器中使用閉包

在執(zhí)行事件監(jiān)聽器時，通常可取的做法是將私有數(shù)據(jù)和持久性數(shù)據(jù)附加到對象中。JavaScript 不支持“私有”實例數(shù)據(jù)，但是支持允許內(nèi)部函數(shù)訪問外部變量的閉包。在事件監(jiān)聽器中，閉包非常適用于訪問通常不附加到發(fā)生事件的對象的變量。

以下示例在事件監(jiān)聽器中使用了函數(shù)閉包將加密訊息分配給一組標記。點擊每個標記將會看到加密訊息的一部分，該訊息并不包含在標記本身內(nèi)。

復制代碼代碼如下:

 
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官方里面復制下來的

接下來我要實現(xiàn)從數(shù)據(jù)庫中讀取經(jīng)緯度、地址信息，在google map上進行標注并單擊標注出現(xiàn)信息

要實現(xiàn)多點標注，以上代碼可以參考

復制代碼代碼如下:

 
<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獲取經(jīng)緯度的值 
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'; 
//設(shè)置標志點 
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可以設(shè)定自己想顯示的圖標，不設(shè)置則顯示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>"+ "經(jīng)緯度："+ lat1 + "，"+ lng1 +"</span>", 
size: new google.maps.Size(50, 50) 
}); 
// infowindow.setContent("地址:"+ addre1 +"經(jīng)度:" +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; //創(chuàng)建連接字符串 
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"];///數(shù)據(jù)庫讀取float型的數(shù)據(jù)要用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(); 

} 


} 