利用JS闭包实现Google地图多点标注与信息窗口交互

JavaScript闭包在地图事件中的应用

近期在进行地图开发工作时，编写少量JS代码却遇到了诸多挑战。作为初次接触JavaScript的开发者，过程中充满难点，以下是对近期研究内容的总结，旨在记录开发中遇到的坑点。

在事件监听器中使用闭包

在编写事件监听器时，通常建议将私有数据和持久性数据附加到对象上。由于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);
// 在地图上随机添加5个标记点。
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);
} 
} 
// 这5个标记点击时会显示一条秘密信息
// 但该信息并不包含在标记的实例数据中。
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地图上标注这些点，点击标注点后弹出详细信息。

若要实现多点标注功能，上述代码可作为参考基础。

 
<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>

C#后端数据读取与接口实现

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();
} 
}