功能如下：打开时自动定位到当前位置（浏览器可能会屏蔽自动定位功能，建议手机查看，或直接打开地址：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. request.getparameter和 request.getattribute的差别

    request.getAttribute():是request时设置的变量的值,用request.setAttribute("name","您自己的值");来设 ...

  2. Scala Sublime text 3 Build 编译

    使用Sublime text 3编译Scala 在sublime工具栏中[tools]->[Build System]->[new Build System]添加如下文本 { " ...

  3. 硬盘安装Archlinux「2013-12-26」

    按照Archlinux的中文WIKI安装完成,最后安装引导失败.原因未知. 折腾的脑袋好大,本来都要放弃了,幸好在贴吧发帖求助,吧友@atmouse耐心热心的帮助 最后重启成功启动.帖子地址:http ...

  4. Hbuilder常用快捷键功能.html

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  5. JavaScript实例技巧精选(13)—计算在网页上的停留时间

    >>点击这里下载完整html源码<< 这是截图: 核心代码如下: <SCRIPT LANGUAGE="JAVASCRIPT"> <!-- ...

  6. Hashmat the brave warrior - UVa10055

    欢迎访问我的新博客:http://www.milkcu.com/blog/ 原文地址:http://www.milkcu.com/blog/archives/uva10055.html 题目描述 Pr ...

  7. Word文档合并

    Word文档合并的一种实现   今天遇到一个问题,就是需要把多个Word文档的内容追加到一个目标Word文档的后面,如果我有目标文档a.doc以及其他很多个文档b.doc,c.doc…等等数量很多.这 ...

  8. 【学习笔记】锋利的jQuery（二）DOM操作

    一.获取DOM节点 //找祖宗 parent() parents() closest() //找后代 children(); find(); //找兄弟 next()/nextAll() prev() ...

  9. HTML5 CANVAS制图 基础总结

    一.基本绘图 首先,定义2D渲染变量ct(这里用了Jquery库): var ct = $(#canvasId).get(0).getContext('2d'); 以下是绘制各种基本图形的方法: // ...

  10. 大数据时代，我们为什么使用hadoop

    大数据时代,我们为什么使用hadoop 我们先来看看大数据时代, 什么叫大数据,“大”,说的并不仅是数据的“多”!不能用数据到了多少TB ,多少PB 来说. 对于大数据,可以用四个词来表示:大量,多样 ...