用js闭包的方法实现多点标注冒泡示例
标签：新闻动态 日期：2018-03-23 09:53 录入：汇盛国际平台 浏览： 次
[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上进行标注并单击标注出现信息
要实现多点标注，以上代码可以参考
代码如下:
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
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
{
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: "",
// icon: image, //通过icon可以设定自己想显示的图标，不设置则显示Google map默认的图标
title: tit //title表示鼠标放到marker上要显示的值。
});
attachSecretMessage(marker, j,addre,lat,lng);
}
}
function attachSecretMessage(marker, number,addre1,lat1,lng1) {
