提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  后端

当前栏目

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

JS方法 实现 示例 闭包 标注 冒泡 多点
2023-06-13 09:15:27 时间
这两天在做地图这块，一点点js代码，各种坑。第一次接触js，各种难，下面就这几天的研究做一些总结，求坑
在事件监听器中使用闭包

在执行事件监听器时，通常可取的做法是将私有数据和持久性数据附加到对象中。JavaScript不支持“私有”实例数据，但是支持允许内部函数访问外部变量的闭包。在事件监听器中，闭包非常适用于访问通常不附加到发生事件的对象的变量。

以下示例在事件监听器中使用了函数闭包将加密讯息分配给一组标记。点击每个标记将会看到加密讯息的一部分，该讯息并不包含在标记本身内。
复制代码代码如下:

varmap;
functioninitialize(){
varmyLatlng=newgoogle.maps.LatLng(-25.363882,131.044922);
varmapOptions={
zoom:4,
center:myLatlng,
mapTypeId:google.maps.MapTypeId.ROADMAP
}

map=newgoogle.maps.Map(document.getElementById("map_canvas"),mapOptions);

//Add5markerstothemapatrandomlocations.
varsouthWest=newgoogle.maps.LatLng(-31.203405,125.244141);
varnorthEast=newgoogle.maps.LatLng(-25.363882,131.044922);
varbounds=newgoogle.maps.LatLngBounds(southWest,northEast);
map.fitBounds(bounds);
varlngSpan=northEast.lng()-southWest.lng();
varlatSpan=northEast.lat()-southWest.lat();
for(vari=0;i<5;i++){
varlocation=newgoogle.maps.LatLng(southWest.lat()+latSpan*Math.random(),
southWest.lng()+lngSpan*Math.random());
varmarker=newgoogle.maps.Marker({
position:location,
map:map
});
varj=i+1;
marker.setTitle(j.toString());
attachSecretMessage(marker,i);
}
}

//Thefivemarkersshowasecretmessagewhenclicked
//butthatmessageisnotwithinthemarker"sinstancedata.
functionattachSecretMessage(marker,number){
varmessage=["This","is","the","secret","message"];
varinfowindow=newgoogle.maps.InfoWindow(
{content:message[number],
size:newgoogle.maps.Size(50,50)
});
google.maps.event.addListener(marker,"click",function(){
infowindow.open(map,marker);
});
}

这段代码是从google官方里面复制下来的

接下来我要实现从数据库中读取经纬度、地址信息，在googlemap上进行标注并单击标注出现信息

要实现多点标注，以上代码可以参考
复制代码代码如下:

<scripttype="text/javascript">
varmap;
window.onload=functionload(){

varnumber="<%=number%>";//获取后台cs的pubilc的number的值
varaddress=newArray()
varweidu=newArray();
varjingdu=newArray();
varchepai=newArray();
<%for(inti=0;i<number;i++){%>

weidu.push("<%=lan[i]%>");//从后台cs获取经纬度的值
jingdu.push("<%=lon[i]%>");
address.push("<%=addr[i]%>");
chepai.push("<%=carnum[i]%>");
//varwei;
//wei=chepai["<%=i%>"];
//alert(wei);
<%}%>

varLatlng=newgoogle.maps.LatLng(weidu[0],jingdu[0]);
//varmyLatlng=newgoogle.maps.LatLng(25.273566,110.290195);
varmyOptions={
zoom:8,
center:Latlng,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
map=newgoogle.maps.Map(document.getElementById("map_canvas"),myOptions);////初始化一个地图实例

for(varj=0;j<number;j++)//这里卡了好久，原因是js的类型只有var；把js和cs弄混了一直用到《%%>，其实单纯的js不需要，跟C差不多就可以了
{
varlat=weidu[j];
varlng=jingdu[j];
varaddre=address[j];
varchepaihao=chepai[j];
//alert(j);
//alert(lat);
//varimage="Image/webcam.png";
//设置标志点
varmyLatlng=newgoogle.maps.LatLng(weidu[j],jingdu[j]);
varh=chepaihao;
vartit=h.toString();
varmarker=newgoogle.maps.Marker({
position:myLatlng,
map:map,
//icon:"http://google-maps-icons.googlecode.com/files/yellow08.png",
//icon:image,//通过icon可以设定自己想显示的图标，不设置则显示Googlemap默认的图标
title:tit//title表示鼠标放到marker上要显示的值。
});
attachSecretMessage(marker,j,addre,lat,lng);

}

}

functionattachSecretMessage(marker,number,addre1,lat1,lng1){

//varmessage=["This","is","the","secret","message"];
varinfowindow=newgoogle.maps.InfoWindow(
{content:"<spanstyle="font-size:15px"><b>地址:</b>"+addre1+"<br>"+"经纬度："+lat1+"，"+lng1+"</span>",
size:newgoogle.maps.Size(50,50)
});
//infowindow.setContent("地址:"+addre1+"经度:"+lat1+"纬度："+lng1);
//点击弹出信息窗口
google.maps.event.addListener(marker,"click",function(){
infowindow.open(map,marker);
});
}

</script>

cs后端代码：
复制代码代码如下:
usingSystem;
usingSystem.Collections.Generic;
usingSystem.Linq;
usingSystem.Web;
usingSystem.Web.UI;
usingSystem.Web.UI.WebControls;

usingSystem.Web.UI.HtmlControls;
usingSystem.Data.SqlClient;
publicpartialclassDefault2:System.Web.UI.Page
{
publicdouble[]la=newdouble[25];
publicdouble[]ln=newdouble[25];
publicint[]id=newint[25];
publicstring[]addr=newstring[25];
publicintnumber;


protectedvoidPage_Load(objectsender,EventArgse)
{
stringmycnnConnectionString1=System.Configuration.ConfigurationManager.ConnectionStrings["testconect"].ConnectionString;//创建连接字符串
SqlConnectionmycnn1=newSqlConnection(mycnnConnectionString1);
mycnn1.Open();
SqlCommandcmd1=newSqlCommand("selectL_ID,L_Lantitude,L_Longitude,L_AddressfromLatestPosition",mycnn1);
SqlDataReaderdr1=cmd1.ExecuteReader();
intk2=0;
intk3=0;
intk4=0;
intk1=0;
//stringbuf1="";
doublebuf2=0;
doublebuf3=0;
intbuf4=0;
stringbuf1="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();

}


}

相关文章