网站首页
精品模板
会员模板
建站资源
站长素材
建站教程
编程笔记
编程问答
编程笔记
html教程 css教程 前端开发 cms教程 seo优化 网页设计 服务器 数据库 平面设计 电脑教程 编程教程 互联网 移动开发 php编程 java编程 实例代码 Python编程
沃梦达建站-编程笔记-编程教程-正文

百度地图API 一些简单方法

2017-01-17编程教程
263
  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>  

The End

相关推荐

layui根据百度地图经纬度在弹出层中显示位置
首先你需要引入百度地图的js script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0ak=你的ak"/script ak ,注意是要浏览器端的ak，这个直接到百度开发者平台申请。 引入layui，这个大家可以到layui官网看看怎么引入layer， 注意：这里要提...
2025-01-09 编程教程
240
C#之socket编程
编程需要恒心和毅力，最主要的是要有信心，循序渐进的完成任务。 一、socket类用于网络通信 命名空间System.Net.Sockets，完整的类引用System.Net.Sockets.Socket。Socket类支持各种网络协议。 二、简单的控制台程序 using System;using System.Collections....
2023-03-07 编程教程
114
百度UEditor编辑器如何禁止过滤div等网页html标签
将设计排版好的页面html代码上传到数据库，再读取出来的时候发现所有的div都被替换成了p标签。 解决方法: 首先在ueditor.all.js文件内搜索allowDivTransToP,找到如下的代码，将true设置为false me.setOpt({ 'allowDivTransToP':false, 'disabledTableInTable'...
2022-11-23 编程教程
495
PHP错误Warning: Cannot modify header information - headers alr
今天在用php进行图片保存输出时候，图片一直显示错误，后面用调试模式下提示：Warning: Cannot modify header information - headers already sent by... 看了一些网上的方法也没解决，最后在php.ini配置output_buffering默认为4096就没有遇到这个错误了： o...
2022-05-18 编程教程
69
php中判断一个字符串包含另一个字符串的方法
第一种方法：用php的strpos() 函数判断字符串中是否包含某字符串的方法 if(strpos(www.genban.org,genban) !== false){ echo 包含genban; }else{ echo 不包含genban; } 第二种 使用了explode 用explode进行判断PHP判断字符串的包含代码如下: ?php $name = 00...
2020-03-28 编程教程
403
PHP 随机用户名账号的生成
随机生成难点是在于如何避免碰撞，有人说用md5，GUID这些机制啊，当然可以，但是做为账号，看着有乱，而且生成位数也过长。 本方法只需要解决1秒内的并发碰撞就可以，因为固定头部采用的是unixtime时间，精确到秒，超过1秒，这个头部的时间肯定变化了。同时...
2020-03-27 编程教程
79

热门文章

1您未被授权查看该页原因及解决办法 2php require_once的使用方法总结 3网站https改造后含http访问的iframe框架无法显示的解决办法 4PHP生成excel时单元格内换行问题的解决方法-PHPphp技巧 5Nginx增加mime类型 修改mime type类型默认打开方式的方法 6css Cursor:url()自定义鼠标指针样式为图片 7php中出现Notice: Uninitialized string offset: 0原因及解决办法 8js获取数组元素个数和对象成员数

热门精品源码

最新VIP资源

1多功能实用站长工具箱html功能模板 2多风格简历在线生成程序网页模板 3论文相似度查询系统源码 4响应式旅游景点宣传推广页面模板 5在线起名宣传推广网站源码 6酷黑微信小程序网站开发宣传页模板 7房产销售交易中介网站模板 8小学作业自动生成程序