功能如下：打开时自动定位到当前位置（浏览器可能会屏蔽自动定位功能，建议手机查看，或直接打开地址：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的自动定位路线查询的更多相关文章

  1. 百度地图API的自动定位和搜索功能（移动端）

    近期有个项目涉及到百度地图API,要求做到自动定位和搜索功能.煞费苦心的研究半天,终于能将两个功能合二为一,现将代码贴出来分享给大家,希望你们的砖搬得又快又好.注释不多,具体请参照:http://lb ...

  2. vue结合百度地图Api实现周边配置查询及根据筛选结果显示对应坐标详情

    在我们平常写房地产相关项目的时候经常会用到百度地图,因为这一块客户会考虑到房源周围的配套或者地铁线路所以在这类项目中就不可以避免的会用到百度地图,当然这只是其中一种,其他地图工具也可以,因为我这个项目 ...

  3. 【百度地图API】小学生找哥哥——小学生没钱打车，所以此为公交查询功能

    原文:[百度地图API]小学生找哥哥--小学生没钱打车,所以此为公交查询功能 任务描述: 有位在魏公村附近上小学的小朋友,要去北京邮电大学找哥哥.他身上钱很少,只够坐公交的.所以,百度地图API快帮帮 ...

  4. android百度地图开发之自动定位所在位置与固定位置进行驾车，步行，公交路线搜索

    最近跟着百度地图API学地图开发,先是学了路径搜索,对于已知坐标的两点进行驾车.公交.步行三种路径的搜索(公交路径运行没效果,待学习中),后来又 学了定位功能,能够获取到自己所在位置的经纬度,但当将两 ...

  5. 【百度地图API】如何根据摩卡托坐标进行POI查询，和计算两点距离

    原文:[百度地图API]如何根据摩卡托坐标进行POI查询,和计算两点距离 摘要: 百度地图API有两种坐标系,一种是百度经纬度,一种是摩卡托坐标系.在本章你将学会: 1.如何相互转换这两种坐标: 2. ...

  6. 【百度地图API】建立全国银行位置查询系统（五）——如何更改百度地图的信息窗口内容？

    原文:[百度地图API]建立全国银行位置查询系统(五)--如何更改百度地图的信息窗口内容? 摘要: 酷讯.搜房.去哪儿网等大型房产.旅游酒店网站,用的是百度的数据库,却显示了自定义的信息窗口内容,这是 ...

  7. 【百度地图API】建立全国银行位置查询系统（四）——如何利用百度地图的数据生成自己的标注

    原文:[百度地图API]建立全国银行位置查询系统(四)--如何利用百度地图的数据生成自己的标注 摘要: 上一章留个悬念,"如果自己没有地理坐标的数据库,应该怎样制作银行的分布地图呢?&quo ...

  8. 【百度地图API】建立全国银行位置查询系统（三）——如何在地图上添加银行标注

    原文:[百度地图API]建立全国银行位置查询系统(三)--如何在地图上添加银行标注 <摘要>你将在第三章中学会以下知识: 如何在地图上添加带银行logo的标注?(你也可以换成商场logo, ...

  9. 【百度地图API】建立全国银行位置查询系统（二）——怎样为地图添加控件

    原文:[百度地图API]建立全国银行位置查询系统(二)--怎样为地图添加控件 <摘要>你将在第二章中学会以下知识: 使用手写代码的利器——notepad++: 如何为地图添加控件——鱼骨. ...

随机推荐

  1. UpdateModel方法

    WebForm 对 MVC 说:能否借你的UpdateModel方法来用用? 背景 ASP.NET MVC的Controller有个很不错的方法:UpdataModel (相对应的还有TryUpdat ...

  2. TCP/UDP差异

    首先,它 TCP是面向连接的.有序可靠的协议,然后UDP同TCP相对,那张脸无序连接不可靠的协议. 首先,为什么TCP它是面向连接的.由TCP如果传输是需要进行三次握手,这是client为了服务发送数 ...

  3. Spring Resource之ResourceLoaderAware接口

    ResourceLoaderAware接口是一个特殊的标记接口,它表示对象需要提供给一个ResourceLoader引用: public interface ResourceLoaderAware { ...

  4. 织梦不仅是链接到其他调用next

    //打开系统文件织梦 /include/arc.archives.class.php 找到GetPreNext函数 function GetPreNext($gtype='') { $rs = ''; ...

  5. firefox 对WebRTC支持

    本文原创自 http://blog.csdn.net/voipmaker  转载注明出处. firefox pc和android 最新版本号已经默认支持webrtc, 同一时候,firefox在支持V ...

  6. nginx 502 Bad Gateway 错误问题收集

    nginx 502 Bad Gateway 错误问题收集 (2010-11-18 13:51:37) 转载▼ 标签: 杂谈 分类: 工作 nginx 502 Bad Gateway 错误问题收集 因为 ...

  7. [置顶] 网页提交方式post和get的区别和联系

    都知道GET一般用于获取/查询资源信息,而POST一般用于更新资源信息.但具体区别呢?可以互换吗? 主要区别有:1传输数据的方式不同,2传输的数据多少不同,3传输数据的安全性不同4,后台获取数据的方式 ...

  8. Glue4Net简单部署基于win服务的Socket程序

    smark 专注于高并发网络和大型网站架规划设计,提供.NET平台下高吞吐的网络通讯应用技术咨询和支持 Glue4Net简单部署基于win服务的Socket程序 在写一些服务应用的时候经常把要它部署到 ...

  9. C++ multimap容器访问同一键值元素的不同方法

    multimap是一种多元map容器,允许一个键对应多个值. 本文介绍了 multimap访问同一键值元素的三种不同方法,详细看下面代码: typedef multimap<string,int ...

  10. Memory Dump 分析器

    Visual Studio 2013 新功能 Memory Dump 分析器   TechEd2013 发现新功能 12月5日和6日,在国家会议中心参加了微软的 TechEd2013 技术大会,了解了 ...