功能如下：打开时自动定位到当前位置（浏览器可能会屏蔽自动定位功能，建议手机查看，或直接打开地址：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. 使用QT来制作串口终端

    为什么要使用QT,因为它是跨平台的. 我现在使用的环境是Win7 64bit,使用VS的编译器来编译QT工程. 安装这套环境简单说一下:先到QT官网下载qt-windows-opensource-5. ...

  2. ReSharper 8.1支持TypeScript语言之代码检查特征

    自ReSharper 8.1发布以来,就支持TypeScript.其在TypeScript语言拼写帮助和代码完成中,几乎是一个里程碑的发展,这是令人激动的改进. 支持TypeScript效果就目前测试 ...

  3. .NET的微型Web框架 Nancy

    .NET的微型Web框架 Nancy .NET的微型Web框架 Nancy   大部分微软平台的开发人员如果选择开发框架只能是在ASP.NET WEBFORM和ASP.NET MVC两个之间选择. 而 ...

  4. C#的StringBuilder 以及string字符串拼接的效率对照

    今天公司一个做Unity3d的人在说字符串拼接的一个效率问题,他觉得string拼接会产生新的一个内存空间,假设不及时回收会产生大量的碎片,特别是在Unity3d这样一个Updata环境下,由于每一帧 ...

  5. 最初的ajax案例

    ----------------------原始的ajax: function guo() {            var xhr            if (XMLHttpRequest) {  ...

  6. Map和List

    Map和List 当把Map中的key-value对当成单独的集合元素来对待时,Map和Set就统一起来了. Map集合是一个关联数组,它包含两组值:一组是所有key组成的集合,因为Map集合的key ...

  7. Step one : 熟悉HTML

    //H1 1 <html> <head> <title>BeiJing</title> </head> <body> <h ...

  8. RoleManager 进行角色管理

    ASP.NET Identity 使用 RoleManager 进行角色管理 (VS2013RC) 注:本文系作者原创,但可随意转载. 最近做一个Web平台系统,系统包含3个角色,“管理员, 企业用户 ...

  9. 【IOS开发】《多线程编程指南》笔记

    线程是单个应用中可以并发执行多个代码路径的多种技术之一.虽然更新的技术如操作对象(Operation)和Grand Central Dispatch(GCD),提供一个等价现代化和高效的基础设施来实现 ...

  10. LinQ动态排序

    LinQ动态排序 首先修复程序中的一个BUG这个BUG在GridPager类中,把sord修改为sort这个名称填写错误,会导致后台一直无法获取datagrid的排序字段 本来是没有这一讲的,为了使2 ...