百度地圖API的自動定位路線查詢

標籤：

功能如下：開啟時自動定位到當前位置（瀏覽器可能會屏蔽自動定位功能，建議手機查看，或直接開啟地址：http://1.jingcode.applinzi.com/test2.html），輸入目的地點擊搜尋後，顯示當前位置和目的地之間的線路圖。
<!DOCTYPE html>
<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
   <style type="text/css">
   body, html {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微軟雅黑";}
   #allmap{width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微軟雅黑";}
   header{margin: 5px auto;font-size: 16px;}
   .typein{width: 90px;height: 16px;font-size: 16px;}
   /*.btn{color:#fff;height: 25px;}*/
   </style>
   <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=6VArBpbbbMjBVP22TflHkpSq"></script>
   <script type="text/javascript" src="http://developer.baidu.com/map/jsdemo/demo/convertor.js"></script>  
   <title>路線查詢</title>
</head>
<body>
   <header>
      <label for="start">起點:<input type="text" placeholder="請輸入起點" class="typein" id="start"/></label>
      <label for="zhongdian">終點:<input type="text" id="zhongdian" placeholder="請輸入終點" class="typein"/></label>
      <input type="button" class="btn" id="result" value="查詢" onclick="chaxun()"/>
   </header>
   <div id="allmap"></div>
</body>
</html>
<script type="text/javascript">
   var map = new BMap.Map("allmap");
   var lng , lat ;

   var geolocation = new BMap.Geolocation();
   geolocation.getCurrentPosition(function(r){
      if(this.getStatus() == BMAP_STATUS_SUCCESS){
         
         //map.panTo(r.point);
         lng = r.point.lng;
         lat = r.point.lat
         //alert(‘您的位置：‘+r.point.lng+‘,‘+r.point.lat);

         map.centerAndZoom(new BMap.Point(lng, lat), 18);
         var mk = new BMap.Marker(r.point);
         map.addOverlay(mk);
         map.addControl(new BMap.MapTypeControl());   //添加地圖類型控制項
         map.enableScrollWheelZoom(true);     //開啟滑鼠滾輪縮放
      }
      else {
         alert(‘failed‘+this.getStatus());
      }        
   });

   function chaxun(){
      map.clearOverlays(); 
      var zhongdian = document.getElementById("zhongdian").value;
      var qidian = document.getElementById("start").value;
      //從定位地點到終點
      //search(new BMap.Point(lng, lat),zhongdian,BMAP_DRIVING_POLICY_LEAST_DISTANCE);

      //從輸入的起點到終點
      search(qidian,zhongdian,BMAP_DRIVING_POLICY_LEAST_DISTANCE);

      function search(start,end,route){ 
         var driving = new BMap.DrivingRoute(map, {renderOptions:{map: map, autoViewport: true},policy: route});
         driving.search(start,end);
      }
   }
</script>

百度地圖API的自動定位路線查詢