百度地图API 一些简单方法

编程教程 跟版网
!--divwidth= 300px 请输入:inputtype= text id= suggestId size= 20 value= style= width:150px; /inputtype= button value= submit id= submit onClick= getAddress() /div !--divid= result style= width:400px;float:left /div-- divstyle= width:800px;
  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>  

本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除！

相关文档推荐

用百度AI的OCR文字识别结合PHP实现了图片的文字识别功能
第一步可定要获取百度的三个东西 要到百度AI网站(http://ai.baidu.com/)去注册 然后获得 -const APP_ID = 请填写你的appid; -const API_KEY = 请填写你的API_KEY; -const SECRET_KEY = 请填写你的SECRET_KEY; 第二步下载SDK https://github.com/jankinsun/Ne
PHP实现仿百度文库,豆丁在线文档效果(word,excel,ppt转flash)
本文实例讲述了PHP实现仿百度文库,豆丁在线文档效果。分享给大家供大家参考，具体如下： 由于项目要实现类似百度文库的功能，又是我一个人做的项目，所以就想到找免费的现成的来使用。在网上找到的都是一样的。如下： Flash Paper支持Office文档（.doc,.xls,
php+ajax写的仿百度谷歌搜索下拉自动提示框效果
仿百度谷歌搜索下拉自动提示原理并不是很复杂，主要就是通过ajax这座桥梁。没有百度那么强大，它可以匹配拼音等，我目前水平确实做不到，我只是实现一下这个效果。 先看一下效果吧 输入一个p后的效果 每输入一个字符都会进行一次匹配 效果就这样，如果觉得还
discuz被挂马怎么办_discuz百度快照被劫持的解决办法
目前已遇到两例discuz网站百度快照被劫持的例子，一般快照被劫持很难被发现。 被劫持的表现为： 在百度中输入自己的网址，出现被收录的帖子链接，点击后就跳转到菠菜网站等。 下面讲下如何解决该问题： 进discuz后台找到工具-文件校验，看下最近有哪些php文
利用百度地图api通过城市地址等信息取经纬度
标红的是可以通过经纬度获得当前城市信息（微信定位使用）。 Geocoding API有哪些功能？ Geocoding API包括地址解析和逆地址解析功能。 地址解析是指，由详细到街道的结构化地址得到百度经纬度信息，且支持名胜古迹、标志性建筑名称直接解析返回百度经纬度。
百度地图API简单应用——1.根据地址查询经纬度
这几天比较空闲，就接触了下百度地图的API(开发者中心链接地址：http://developer.baidu.com)，发现调用还是挺方便的。只要简单几步注册下，就可以获得一个Key，就能直接调用（PS:好像1.3版本前的无需注册获取key，就能直接调用api）。 想着能结合到自己的项
html教程css教程前端开发cms教程seo优化网页设计服务器数据库平面设计电脑教程编程教程互联网移动开发php编程java编程建站技巧Python编程
织梦资讯网 织梦模板 dede 外语学校 织梦鬼故事 竞价网站源码 竞价培训网 门户网站 织梦二次开发 织梦笑话网 dedecms笑话网 织梦源码 网站建设 搞笑图片 织梦教程 旅游网站源码 织梦旅游网 学校培训 html5 企业织梦源码 医院源码 后台样式 移动营销页 整形医院 大学医院 新手建站 客服代码 洗衣机维修 企业网站 淘宝客 导航菜单 教育网站 学校源码 装修网站 装修模板 美容整形 女性健康 妈妈网 机械源码 建站公司 珠宝首饰 苹果网站 手机资讯 美女图片 织梦模版打包 妇科源码 安卓市场源码 男性时尚网 健康之家 app应用网站 笑话网站 下载站 美女图片网 中医院网站 家装网站源码 QQ网站 标牌网站 魔兽世界网 淘宝客源码 YY网站源码 别墅设计网站 服装搭配网 宝宝起名网 站长网站 婚庆网站 脑科医院源码 笑话源码 肝胆医院 意外怀孕源码 工作室