JS闭包在百度地图回调事件中的作用

最新推荐文章于 2023-09-11 16:02:47 发布

fengyu88812

最新推荐文章于 2023-09-11 16:02:47 发布

阅读量2k

点赞数

本文链接：https://blog.csdn.net/fengyu88812/article/details/8904608

版权

<!DOCTYPE html>

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body, html,#allmap {width: 100%;height: 100%;overflow: hidden;hidden;margin:0;}
#l-map{height:100%;width:69%;float:left;border-right:1px solid #bcbcbc;}
#r-result{height:100%;width:30%;float:right;}
</style>
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
<link href="http://api.map.baidu.com/library/TrafficControl/1.4/src/TrafficControl_min.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.4&ak=C32f961fe9c9b79595ce9946b5d2c287"></script>
<script type="text/javascript" src="http://api.map.baidu.com/library/TrafficControl/1.4/src/TrafficControl_min.js"></script>

<title>自行车</title>
</head>
<body>
<div id="l-map">地图区域</div>
<div id="r-result">列表区域</div>
</body>
</html>
<script type="text/javascript">

var map = new BMap.Map("l-map");
map.centerAndZoom(new BMap.Point(121.556691, 29.880152), 17);
var myIcon = new BMap.Icon("5.png", new BMap.Size(35,40));//自行车图标

Date.prototype.format = function(format)
{
var o = {
"M+" : this.getMonth()+1, //month
"d+" : this.getDate(), //day
"h+" : this.getHours(), //hour
"m+" : this.getMinutes(), //minute
"s+" : this.getSeconds(), //second
"q+" : Math.floor((this.getMonth()+3)/3), //quarter
"S" : this.getMilliseconds() //millisecond
}
if(/(y+)/.test(format)) format=format.replace(RegExp.$1,
(this.getFullYear()+"").substr(4 - RegExp.$1.length));
for(var k in o)if(new RegExp("("+ k +")").test(format))
format = format.replace(RegExp.$1,
RegExp.$1.length==1 ? o[k] :
("00"+ o[k]).substr((""+ o[k]).length));
return format;
}
var datestr = new Date().format("yyyy-MM-dd hh:mm");

//添加路况信息按钮
var ctrl = new BMapLib.TrafficControl({
showPanel: false //是否显示路况提示面板
});
map.addControl(ctrl);
ctrl.setAnchor(BMAP_ANCHOR_TOP_RIGHT);

map.addControl(new BMap.NavigationControl({type: BMAP_NAVIGATION_CONTROL_SMALL})); //为地图添加鱼骨（迷你型）
map.addControl(new BMap.ScaleControl({offset: new BMap.Size(5, 40)})); //添加一个带上偏移量的比例尺
map.setCurrentCity("宁波"); // 仅当设置城市信息时，MapTypeControl的切换功能才能可用

var myCopyright = new BMap.CopyrightControl({offset: new BMap.Size(82, 0)}) //设置版权信息偏移量
map.addControl(myCopyright); //为地图添加版权控件
myCopyright.addCopyright({id : 1, content : ''});

//结构体
function SiteEntity(siteid,sitename,lat,lng,total,left)
{
this.siteid = siteid;
this.sitename = sitename;
this.lat = lat;
this.lng = lng;
this.total = total;
this.left = left;
}

var localEntity = new SiteEntity(1001,'宁波市政府站',121.556565, 29.880019,40,23);
//可以通过JSON动态返回，这里静态
var entityList = [
new SiteEntity(0,'宁波市政府站',121.556565, 29.880019,40,23),
new SiteEntity(1,'世纪广场站',121.555711, 29.877882,40,27),
new SiteEntity(2,'万里大厦站',121.55829, 29.877036,45,30),
new SiteEntity(3,'天一广场站',121.555711, 29.877263,40,15),
new SiteEntity(4,'鼓楼站',121.552873, 29.879683,35,11),
new SiteEntity(5,'和义大道站',121.56102, 29.879792,40,9),
new SiteEntity(6,'开明小区站',121.558811, 29.880567,40,15)
];

//创建标记点
//var pt = new BMap.Point(121.556565, 29.880019);//宁波市政府
//var localpt = pt;
//var pt1 = new BMap.Point(121.555711, 29.877882);//世纪广场
//var pt2 = new BMap.Point(121.55829, 29.877036);//万里大厦
//var pt3 = new BMap.Point(121.563149, 29.877263);//天一广场
//var pt4 = new BMap.Point(121.552873, 29.879683);//鼓楼
//var pt5 = new BMap.Point(121.56102, 29.879792);//和义大道
//var pt6 = new BMap.Point(121.558811, 29.880567);//开明小区

var markers = new Array();
var infowindows = new Array();

uniqueID = (function(id){ //这个函数的调用对象保存值
//外层函数返回一个有权访问恒久值的嵌套的函数
//那就是我们保存在变量uniqueID里的嵌套函数.
var siteid = id;
return function(){return siteid;};
})(); //在定义后调用外层函数.

//地图上创建标注
for(var j = 0;j < entityList.length; j++)
{
var pt = new BMap.Point(entityList[j].lat,entityList[j].lng);
markers[j] = new BMap.Marker(pt,{icon:myIcon}); // 创建标注
var label = new BMap.Label(entityList[j].sitename,{offset:new BMap.Size(20,-10)});
markers[j].setLabel(label);
//标注添加
map.addOverlay(markers[j]); // 将标注添加到地图中
//创建气泡
infowindows[j] = new BMap.InfoWindow(getwindowstr(entityList[j]));
infowindows[j].setWidth(220);
//添加气泡点击事件
//由于是回调函数，需要注意如果是直接
// markers[j].addEventListener("click", function(){this.openInfoWindow(infowindows[j]);});
//那么实际上是无法执行的，有错误，错误原因在于回调的时刻，j作为一个局部变量，已经失效了。就算没失效，可能此时的j=entityList.length
//采用闭包解决这个问题
//if(j==0)
//{
//tmpj = j;
//markers[j].addEventListener("click", function(){this.openInfoWindow(infowindows[uniqueID(j)]);});
//}
//用函数闭包mySetOpenInfoWindow() 替代回调各站点各自click事件的注册
}

mySetOpenInfoWindow();

function mySetOpenInfoWindow()
{
for(var j=0;j<entityList.length;j++)
{
markers[j].addEventListener("click",
(function(j)
{
return function()
{
this.openInfoWindow(infowindows[j]);
}
}
)(j));
}
}

//map.openInfoWindow(infoWindow1,pt); //开启信息窗口

function movetosite(siteid)
{
var entity = entityList[siteid];
var localpt = new BMap.Point(localEntity.lat,localEntity.lng);
var pt = new BMap.Point(entity.lat,entity.lng);
//alert(siteid);
var driving = new BMap.DrivingRoute(map, {renderOptions:{map: map, autoViewport: true,enableDragging : true}});
//var driving = new BMap.WalkingRoute(map, {renderOptions:{map: map, autoViewport: true}});
//避开高速
driving.search(localpt,pt,BMAP_DRIVING_POLICY_AVOID_HIGHWAYS);
driving.setSearchCompleteCallback(function(){
dis = driving.getResults().getPlan(0).getDistance(true);
var roadStr = "<table width='98%' height='98%'>"
+ "<tr><th style='font-size:16px;text-align:center;'>路线信息</th></tr>"
+ "<tr><td ><hr></td></tr>"
+ "<tr><td >行驶距离大约<font color='darkgreen'> " + dis + " </font></td></tr>";
+ "</table>"
var roadinfoWindow = new BMap.InfoWindow(roadStr);
roadinfoWindow.setWidth(220);
map.openInfoWindow(roadinfoWindow,pt);
});
map.setViewport([localpt,pt]); //调整到最佳视野

}

function getwindowstr(entity)
{
var windows1Str = "<table width='98%' height='98%'>"
+ "<tr><th><img src='home.png' width='45px' height='45px'/></th><th style='font-size:20px;text-align:center;'>"
+ entity.sitename
+ "</th></tr>"
+ "<tr><td colspan='2'><hr></td></tr>"
+ "<tr><td>桩位:</td><td style='font-size:16px;text-align:left;'>站点共有<font color='blue'> " + entity.total+ "</font> 个桩位</td></tr>"
+ "<tr><td>剩余:</td><td style='font-size:16px;text-align:left;'>目前剩余<font color='green'> " + entity.left + "</font>&nbsp辆车</td></tr>";
if(entity.siteid == localEntity.siteid)
{
windows1Str = windows1Str + "<tr><td colspan='2'><font color='darkgreen'>单击移动到 <a href='#' onClick='movetosite("+ entity.siteid +")'>" + entity.sitename + " </a></font></td></tr>";
}else
{
windows1Str = windows1Str + "<tr><td colspan='2'><font color='gray'>您当前在该站点</font></td></tr>";
}
windows1Str = windows1Str + "<tr><td>更新:</td><td style='font-size:16px;text-align:left;'>" + datestr + "</td></tr>";
windows1Str = windows1Str + "</table>";
return windows1Str;
}
var s = [];
// s.push('<div style="font-family: arial,sans-serif; border: 1px solid rgb(153, 153, 153); font-size: 12px;">');
// s.push('<div style="background: none repeat scroll 0% 0% rgb(255, 255, 255);">');
// s.push('<ol style="list-style: none outside none; padding: 0pt; margin: 0pt;">');
// s.push('<li id="list' + "1" + '" style="margin: 2px 0pt; padding: 0pt 5px 0pt 3px; cursor: pointer; overflow: hidden; line-height: 17px;' + 'background-color:#f0f0f0;' + '" οnclick="openInfoWinFuns[' + 1 + ']()">');
// s.push('<span style="color:#00c;text-decoration:underline">' + '测试地点<b>' + '关键字' + '</b>' + '</span>');
// s.push('<span style="color:#666;"> - ' + '地址地址地址' + '</span>');
// s.push('</li>');
// s.push('');
// s.push('</li>');
// s.push('</ol></div></div>');
// s.push('<table width="100%" font-size="15px">');

//
// s.push('<tr><td ><hr></tr>');
// s.push('<tr><td style="background: rgb(245, 255, 245);font-size:15px;text-align:left;text-decoration:underline;color:darkgreen"><a id="list1"></a></td></tr>');
// s.push('<tr><td style="font-size:12px;text-align:left;">距离599米,有40个桩位,当前剩余17辆车</td></tr>');

// s.push('<tr><td ><hr></tr>');
// s.push('<tr><td style="background: rgb(245, 255, 245);font-size:15px;text-align:left;text-decoration:underline;color:darkgreen">万里大厦站</td></tr>');
// s.push('<tr><td style="font-size:12px;text-align:left;">距离702米,有35个桩位,当前剩余10辆车</td></tr>');

// s.push('<tr><td ><hr></tr>');
// s.push('<tr><td style="background: rgb(245, 255, 245);font-size:15px;text-align:left;text-decoration:underline;color:darkgreen">天一广场站</td></tr>');
//s.push('<tr><td style="font-size:12px;text-align:left;">距离840米,有45个桩位,当前剩余35辆车</td></tr>');
//

// s.push('</table>')

function siteinfo(name,distance,info){
this.name = name;
this.distance = distance;
this.info = info;
}

function sortNumber(a, b)
{
return a.distance - b.distance;
}

var stationArr = [];
//stationArr.sort(sortNumber);
var i = 0;
var tmpsitename;
var tmpinfo;

var searchComplete = function (results){
if (transit.getStatus() != BMAP_STATUS_SUCCESS){
return ;
}
var plan = results.getPlan(0);
if( i < ptlist.length -1)
{
stationArr.push(new siteinfo(i, plan.getDistance(true), i + "info"));
i = i + 1;
transit.search(localpt,ptlist[i]);
}
else
{
stationArr.sort(sortNumber);
s.push('<table width="100%" font-size="15px">');
s.push('<tr><th>附近站点(按距离)</th></tr>')
//
for(var j=0;j<stationArr.length;j++)
{
s.push('<tr><td ><hr></tr>');
s.push('<tr><td style="background: rgb(245, 255, 245);font-size:15px;text-align:left;text-decoration:underline;color:darkgreen"><a id="list1"></a></td></tr>');
s.push('<tr><td style="font-size:12px;text-align:left;">距离599米,有40个桩位,当前剩余17辆车</td></tr>');
//
}

s.push('</table>')
document.getElementById("r-result").innerHTML = s.join("");
}

return plan.getDistance(true); //获取距离
}

var transit = new BMap.DrivingRoute(map, {
onSearchComplete: searchComplete,
onPolylinesSet: function(){
}});
//实际上最好是pt也是site结构体的一个属性，这样全部可以用site来表达了
//var ptlist = [pt1,pt2,pt3,pt4,pt5,pt6];
//transit.search(localpt,pt1);
//transit.search(localpt,pt3);
//transit.search(localpt,pt4);

</script>