注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

午夜阳光

 
 
 

日志

 
 

查询两点的路径走法  

2012-08-31 10:24:04|  分类: Asp.net |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>指定起点与终点的驾车导航</title>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.2"></script>
<style>
body{font-size:14px;}
h5{line-height:3em;padding:0;margin:0;}
a{color:#EE3399;}
a:hover{color:#99AA66;}
.txt{border:1px solid #ccc;background:none;padding:1px;}
.f-l{float:left;}
.t-c{text-align:center;}
.clear{clear:both;}
.hidden{display:none;}
.searchbox{border:4px solid #e5ecf9;height:40px;float:left;line-height:40px;padding:0 20px;margin:0 0 0 50px;}
.mainbox{margin:20px 0 0;}
.boxmap{width:400px;height:300px;border:1px solid gray;float:left;}
.boxpanel{width:250px;float:left;margin:0 0 0 10px;border:1px solid gray;padding:0 10px 10px;}
#startPanel,#endPanel{border:1px solid #FA8722;font-size:12px;}
#startPanel div,#endPanel div{padding:5px;}
#startPanel p,#endPanel p{margin:0;paddin:0;line-height:1.2em;}
#drivingPanel{border:1px solid #6688EE;}
</style>
</head>
<body>
<div>
     <div class="searchbox">
        从<input class="txt" type="text" id="startInput">到<input class="txt" type="text" id="endInput" />&nbsp;&nbsp;<input type="button" value="驾车" onclick="mDriving()" />
    </div>
</div>
<div class="clear"></div>
<div class="mainbox">
    <div class="boxmap" id="container"></div>
    <div class="boxpanel hidden" id="box">
        <h5>起点选择&nbsp;<a href="#" onclick="document.getElementById('startPanel').style.display='block';">(展开)</a></h5>
        <div id="startPanel"></div>
        <h5>终点选择&nbsp;<a href="#" onclick="document.getElementById('endPanel').style.display='block';">(展开)</a></h5>
        <div id="endPanel"></div>
        <h5>驾车导航</h5>
        <div id="drivingPanel"></div>
    </div>
</div>
</body>
</html>
<script type="text/javascript">
var map = new BMap.Map("container");            // 创建Map实例
var point = new BMap.Point(121.50, 31.30);    // 创建点坐标
map.centerAndZoom(point,11);                     // 初始化地图,设置中心点坐标和地图级别。
map.enableScrollWheelZoom();                  // 启用滚轮放大缩小。
var startInfowin = new BMap.InfoWindow("<p class='t-c'><input value='选为起点' type='button' onclick='startDeter();' /></p>");
var endInfowin = new BMap.InfoWindow("<p class='t-c'><input value='选为终点' type='button' onclick='endDeter();' /></p>");
var startResults = null;
var endResults = null;
var startPoint;
var endPoint;
var transit = new BMap.DrivingRoute(map, {renderOptions:{map: map, autoViewport: true,panel:drivingPanel}});
var startOption = {
  onSearchComplete: function(results){
    // 判断状态是否正确
    if (startSearch.getStatus() == BMAP_STATUS_SUCCESS){
      startResults = results;
      var s = [];
      for (var i = 0; i < results.getCurrentNumPois(); i ++){
        s.push("<div><p><a onmouseover='map.openInfoWindow(startInfowin,startResults.getPoi(" + i + ").point);' href='#'>");
        s.push(results.getPoi(i).title);
        s.push("</a></p><p>");
        s.push(results.getPoi(i).address);
        s.push("</p></div>");
      }
      document.getElementById("startPanel").innerHTML = s.join("");
    }else{startResults = null;}
  }
};
var endOption = {
  onSearchComplete: function(results){
    // 判断状态是否正确
    if (endSearch.getStatus() == BMAP_STATUS_SUCCESS){
      endResults = results;
      var s = [];
      for (var i = 0; i < results.getCurrentNumPois(); i ++){
        s.push("<div><p><a href='#' onmouseover='map.openInfoWindow(endInfowin,endResults.getPoi(" + i + ").point);'>");
        s.push(results.getPoi(i).title);
        s.push("</a></p><p>");
        s.push(results.getPoi(i).address);
        s.push("</p></div>");
      }
      document.getElementById("endPanel").innerHTML = s.join("");
    }else{endResults = null;}
  }
};
//创建2个搜索实例
var startSearch = new BMap.LocalSearch(map,startOption);
var endSearch = new BMap.LocalSearch(map,endOption);
function mDriving(){
    var startPlace = document.getElementById("startInput").value;
    var endPlace = document.getElementById("endInput").value;
    startSearch.search(startPlace);
    endSearch.search(endPlace);
    document.getElementById("box").style.display="block";
}
function startDeter(){
    map.clearOverlays();
    startPoint = startInfowin.getPosition();
    var marker = new BMap.Marker(startPoint);
    map.addOverlay(marker);
    document.getElementById("startPanel").style.display="none";
}
function endDeter(){   
    if(startPoint==null){alert("请先选择起点!");}
    else{
        endPoint = endInfowin.getPosition();       
        transit.search(startPoint,endPoint);
        document.getElementById("endPanel").style.display="none";
    }
}
</script>
  评论这张
 
阅读(382)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017