百度地图API 一些简单方法

时间：2017-01-17
  1. <!--div width="300px">请输入:<input type="text" id="suggestId" size="20" value="" style="width:150px;" /><input type="button" value="submit" id="submit" onClick="getAddress()"></div>  
  2. <!--div id="result" style=" width:400px; float:left"></div-->  
  3. <div style="width:800px;height:600px;border:1px solid gray; float:right" id="container"></div>  
  4.   
  5.   
  6. <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.3"></script>  
  7. <script type="text/javascript">  
  8.   
  9. var search="frm_street";  //定义查询框ID；  
  10. var local="广汉市";        // 定义本地地址；  
  11. var lng="104.290493"; //经度  
  12. var lat="30.981528"; //纬度  
  13. var spoi  = new BMap.Point(lng,lat); //经纬度  
  14.   
  15. var map = new BMap.Map("container");  //创建地图实例  
  16. var point = new BMap.Point(lng,lat); //创建点坐标  
  17. map.centerAndZoom(point,15);          //初始化地图，设置中心点坐标和地图级别  
  18. map.enableScrollWheelZoom();        //启用滚轮放大缩小地图  
  19.   
  20. //add_flag0();                            
  21. //=================获取元素==========================\\  
  22. function G(id) {  
  23.     return document.getElementById(id);  
  24. }  
  25. function GV(id){  
  26.     return document.getElementById(id).value;  
  27. }  
  28.   
  29. //=================添加标记==========================\\  
  30.   //添加标记  
  31.   function add_flag0(){  
  32.   var localmarker=new BMap.Marker(new BMap.Point(lng,lat));    
  33.     map.addOverlay(localmarker);   
  34.   }  
  35.   
  36.   //添加目的地标记  
  37.   function add_flag1(point){  
  38.     map.centerAndZoom(point, 15);  
  39.     map.clearOverlays();    //清除地图上所有覆盖物  
  40.     add_flag0();            //添加标记  
  41.     var newmarker=new BMap.Marker(new BMap.Point(point.lng,point.lat));    
  42.     map.addOverlay(newmarker);   
  43.         newmarker.enableDragging();//开启拖动  
  44.     driveline(spoi,point);  
  45.    longAndtime(spoi,point);  
  46.      
  47.    document.edit.lng.value=point.lng;  
  48.   document.edit.lat.value=point.lat;  
  49. }  
  50.   function add_flag2(){  
  51.   
  52.   }  
  53. //=================从输入框获取地址地址==============\\  
  54. function getAddress(){  
  55. get_point(GV(search));  
  56. }  
  57.   
  58. //=================地址解析(根据地址获取坐标点)==========================\\  
  59.   
  60.    function get_point(address){  
  61.     var myGeo = new BMap.Geocoder(); // 创建地址解析器实例  
  62.     myGeo.getPoint(address, function(point){  
  63.     if (point) {                    //如果地址能解析，标记  
  64.          add_flag1(point);  
  65.                }else{  
  66.             alert("地址无法找到!");  
  67.                     }  
  68.                     },local);  
  69.     }  
  70.                       
  71.   
  72. //=================地址反解析(根据坐标点获取地址)==========================\\  
  73.  function get_address(e){  
  74.  var gc = new BMap.Geocoder();   // 创建地址反解析器实例  
  75.  var pt = e.point;  
  76.  var result;  
  77.     add_flag1(pt);  
  78.     gc.getLocation(pt, function(rs){  
  79.         var addComp = rs.addressComponents;  
  80.         if (addComp.street + addComp.streetNumber=="")  
  81.         {  
  82.           result="地址无法找到！";  
  83.         }  
  84.         else{   
  85.         result=addComp.street + addComp.streetNumber;  
  86.         }  
  87.          document.edit.frm_street.value=result;  
  88.          return result;  
  89.        
  90.     });      
  91.       
  92.  }  
  93.   
  94.   
  95. //==============自动下拉列表=========================\\  
  96.   
  97. var ac = new BMap.Autocomplete( {"input" : search,"location" : local} );    //建立一个自动完成的对象  
  98. ac.addEventListener("onconfirm", function(e) {    //鼠标点击下拉列表后的事件    
  99. var _value = e.item.value;  
  100. myValue = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;  
  101. setPlace();  
  102. });  
  103.   
  104. function setPlace(){  
  105.   //  map.clearOverlays();    //清除地图上所有覆盖物  
  106.     function myFun(){  
  107.         var pp = ls.getResults().getPoi(0).point;    //获取第一个智能搜索的结果  
  108.         add_flag1(pp);  
  109.     }  
  110.     var ls = new BMap.LocalSearch(local, { //智能搜索  
  111.       onSearchComplete: myFun  
  112.     });  
  113.     ls.search(myValue);  
  114. }  
  115.   
  116.   
  117. //=================搜索线路==========================\\  
  118.   
  119. function driveline(myP1,myP2){  
  120.  var driving = new BMap.DrivingRoute(map);    //创建驾车实例     
  121.  driving.search(myP1, myP2);                 //第一个驾车搜索     
  122.  driving.setSearchCompleteCallback(function(){         
  123.  var pts = driving.getResults().getPlan(0).getRoute(0).getPath();    //通过驾车实例，获得一系列点的数组        
  124.  var polyline = new BMap.Polyline(pts);            
  125.  map.addOverlay(polyline);                 
  126.   
  127.                  
  128.  var lab1 = new BMap.Label("起点",{position:myP1});       //创建2个label        
  129.  var lab2 = new BMap.Label("终点",{position:myP2});            
  130.  map.addOverlay(lab1);         
  131.  map.addOverlay(lab2);                    
  132.  setTimeout(function(){             
  133.  map.setViewport([myP1,myP2]);          //调整到最佳视野       
  134.  },1000);             
  135.  });}  
  136.   
  137.   
  138.     //=================驾车时间距离==============\\  
  139. function longAndtime(spoi,point){  
  140.     var output="";  
  141.     var searchComplete = function (results){  
  142.     if (transit.getStatus() != BMAP_STATUS_SUCCESS){ return ;}  
  143.          var plan = results.getPlan(0);  
  144.         output += plan.getDuration(true) + "\n";                //获取时间  
  145.         output += "总路程为：" ;  
  146.         output += plan.getDistance(true) + "\n";             //获取距离  
  147.     }  
  148. var transit = new BMap.DrivingRoute(map, {renderOptions: {map: map,panel:"result"},  
  149. //var transit = new BMap.DrivingRoute(map, {renderOptions: {map: map},  
  150.   // onSearchComplete: searchComplete,  
  151.   //  onPolylinesSet: function(){          
  152.   //     setTimeout(function(){alert(output)},"1000");}  
  153.         });  
  154. transit.search(spoi, point);  
  155.   }  
  156.   
  157.   
  158.   
  159. //=================单击地图监听事件==========================\\  
  160. map.addEventListener("click", function(e){   
  161.  get_address(e);  
  162.  // alert(get_address(e));  
  163.   
  164. });  
  165.   
  166. //=================移动地图监听事件==========================\\  
  167. newmarker.addEventListener("dragend", function(e){   
  168.    
  169. });  
  170.   
  171. </script>  

 

 

[javascript]
  1. <!--div style="width:800px;height:600px;border:1px solid gray; float:right" id="container"></div-->  
  2. <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.3"></script>  
  3. <script type="text/javascript">  
  4.   
  5. var local="广汉市";        // 定义本地地址；  
  6. var lng="104.290493"; //经度  
  7. var lat="30.981528"; //纬度  
  8. var spoi  = new BMap.Point(lng,lat); //经纬度  
  9. var map = new BMap.Map("map");  //创建地图实例  
  10. var point = new BMap.Point(lng,lat); //创建点坐标  
  11. map.centerAndZoom(point,15);          //初始化地图，设置中心点坐标和地图级别  
  12. map.enableScrollWheelZoom();        //启用滚轮放大缩小地图  
  13.   
  14. var map = new BMap.Map("map");  
  15. var point = new BMap.Point(104.290493,30.981528);  
  16. map.centerAndZoom(point,15);  
  17. map.enableScrollWheelZoom();  
  18. creat("m4043",104.290493,30.981528,"2012年4月30日","汉口路28号","151038432334");  
  19.   
  20.   
  21.  var infoWindow;   
  22.    
  23. //根据传过来的信息，添加覆盖物  
  24. function creat(id,lng,lat,time,address,phone){  
  25.   
  26.       
  27.               
  28. var message = "<table width='100%' border='0' cellspacing='2' cellpadding='5'>"+  
  29.        "<tr class='even'>"+  
  30.        "<td><div align='center'>呼救时间</div></td>"+  
  31.        "<td><div align='center'>"+time+"</div></td>"+  
  32.        "</tr>"+  
  33.        "<tr class='even'>"+  
  34.        "<td><div align='center'>事故地址</div></td>"+  
  35.        "<td><div align='center'>"+address+"</div></td>"+  
  36.        "</tr>"+  
  37.        "<tr class='even'>"+  
  38.        "<td><div align='center'>呼救电话</div></td>"+  
  39.        "<td><div align='center'>"+phone+"</div></td>"+  
  40.        "</tr>"+  
  41.        "<tr class='odd'>"+  
  42.        "<td colspan='2'><div align='center'>分派    细节    编辑</div></td>"+  
  43.        "</tr>"+  
  44.        "<tr class='odd'>"+  
  45.        "<td colspan='2'><div align='center'>跟踪      打印派车单</div></td>"+     
  46.        "</tr>"+  
  47.     "</table>";  
  48.               
  49.               
  50. var myIcon = new BMap.Icon("./markers/white.png",new BMap.Size(28, 37));  
  51.   
  52.               
  53.               
  54. id = new BMap.Marker(new BMap.Point(lng,lat),{icon: myIcon});  // 创建标注  
  55. map.addOverlay(id);          // 将标注添加到地图中  
  56. id.addEventListener("click", function(e){   
  57.       this.openInfoWindow(infoWindow);   
  58. });  
  59. //id.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画  
  60.  infoWindow = new BMap.InfoWindow(message);  // 创建信息窗口对象  
  61.    
  62. }  
  63.   
  64. //点击列表，传一个point值，显示信息框  
  65. function click_list(point){  
  66. map.openInfoWindow(infoWindow,point);   
  67. }  
  68.   
  69. </script>  

上一条：百度地图API地理位置和坐标转换 下一条:百度地图API简单应用——1.根据地址查询经纬度

相关文章

最新文章

Copyright © 2021-2022 深圳市沃梦达电子商务有限公司 All Rights Reserved.