项目中需要根据点击时候点击的内容,输入百度地图查找并展示规划等相关功能

于是封装了一个单独的百度map的html页面以供调用

功能包括了

①展示底图

②切换卫星图,切换卫星路线图,切换普通地图

③通过百度js对自身进行定位并标注

④根据输入的内容查找地点,并可生成当前位置到目标位置的线路规划

⑤任意两点生成线路规划

⑥清除标注

⑦跳转到百度地图官方页面或打开app进行导航

⑧展示线路规划

使用了自己封装的工具 lyhFloatTip:链接如下:

悬浮提示工具（悬浮出现自动消失）

代码如下:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>map-index.html</title>
  5. <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
  6. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  7. <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
  8. <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
  9. <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
  10. <script type="text/javascript" src="http://api.map.baidu.com/getscript?v=2.0&ak=aAgtfUXdoQOxbI7ZLW197GaWZYfhokCO&services=&t=20190123111209"></script>
  1. <script src="./../static/jquery/jquery.easing.1.3.js"></script>

<script src="./../static/tools/tipsTools/lyh-tip-float.js"></script>

  1. <style type="text/css">
  2. .anchorBL {
  3.     display: none;
  4. }
  6. .btn {
  7.     background-color: white;
  8.     color: #222222;
  9. }
  11. /*去除bootstrap按钮点击后的蓝色方形边框*/
  12. .btn:focus, .btn:active:focus, .btn.active:focus, .btn.focus, .btn:active.focus, .btn.active.focus {
  13.     outline: none;
  14. }
  15. </style>
  16. </head>
  17. <body>
  18.     <div class='col-lg-12 col-md-12 col-sm-12 col-xs-12'>
  19.         <div style="color:white;padding:0px;background-image: linear-gradient( 135deg, #FFAA85 10%, #B3315F 100%);border-radius: 4px"
  20.             class='col-lg-12 col-md-12 col-sm-12 col-xs-12'>
  21.             <div style='font-zize:24px;padding:5px 10px' class='col-lg-6 col-md-6 col-sm-6 col-xs-6'>路线规划</div>
  22.         </div>
  23.     </div>
  24.     <div class='col-lg-12 col-md-12 col-sm-12 col-xs-12' style='padding:10px'>
  25.         <div class='col-lg-12 col-md-12 col-sm-12 col-xs-12' style='border:1px solid #bbbbbb;box-shadow: 2px 2px 2px #aaaaaa'>
  26.             <!-- 地图 -->
  27.             <div id="map" style="height:600px" class='col-lg-12 col-md-12 col-sm-12 col-xs-12'></div>
  28.             <!-- 搜索控件 -->
  29.             <div class='col-lg-12 col-md-12 col-sm-12 col-xs-12' style='position:absolute;padding:5px 20px 0px 40px;top:0px'>
  30.                 <!-- 关闭按钮 -->
  31.                 <div style='position:absolute;top:7px;left:2px'>
  32.                     <button class='btn btn-primary btn-sm' onclick="removeAll();$('#map-page').hide(300)">
  33.                         <span class="glyphicon glyphicon-remove"></span>
  34.                     </button>
  35.                 </div>
  36.                 <input id='search-input' type="text" class="form-control" style='border-color:green'>
  37.                 <div style='position:absolute;top:10px;right:30px;'>
  38.                     <button id='search-location-btn' class='btn btn-success btn-xs' onclick='locationSearch("map")'>
  39.                         <span class="glyphicon glyphicon-search"></span> 搜索
  40.                     </button>
  41.                     <button class='btn btn-primary btn-xs' title='自己到目标的步行或骑行路线规划' onclick='goTo("walk")'>步/骑</button>
  42.                     <button class='btn btn-primary btn-xs' title='自己到目标的公交路线规划' onclick='goTo("bus")'>公交</button>
  43.                     <button class='btn btn-primary btn-xs' title='自己到目标的自驾车路线规划' onclick='goTo("car")'>驾车</button>
  44.                 </div>
  45.             </div>
  46.             <!-- 地图类型切换按钮 -->
  47.             <div style='position:absolute;top:45px;right:15px'>
  48.                 <button class='btn btn-primary btn-sm' onclick="switchMap()" title='切换地图显示'>
  49.                     <span class="glyphicon glyphicon-globe"></span>
  50.                 </button>
  51.             </div>
  52.             <!-- 标记自身 -->
  53.             <div style='position: absolute;left:5px;bottom:5px'>
  54.                 <button class='btn btn-success btn-sm' title='刷新自己的定位' onclick='myLocation()'>
  55.                     <span class="glyphicon glyphicon-screenshot"></span> 我
  56.                 </button>
  57.                 <button class='btn btn-warning btn-sm' onclick='removeAll()'>
  58.                     <span class="glyphicon glyphicon-trash"></span> 清除标注
  59.                 </button>
  60.             </div>
  61.             <!-- 自定义路线开启关闭 -->
  62.             <div style='position: absolute;right:5px;bottom:5px'>
  63.                 <button style='display:none' class='customline btn btn-info btn-sm' onclick='myLine("walk")'>步/骑路线</button>
  64.                 <button style='display:none' class='customline btn btn-info btn-sm' onclick='myLine("bus")'>公交路线</button>
  65.                 <button style='display:none' class='customline btn btn-info btn-sm' onclick='myLine("car")'>驾车路线</button>
  66.                 <button id='customLine' class='btn btn-success btn-sm' onclick='customLine()'>自定义路线开启</button>
  67.             </div>
  68.             <!-- 调用百度地图html或app导航链接按钮 -->
  69.             <div style='position: absolute;right:5px;bottom:45px'>
  70.                 <button id='nav-baidu' style='display:none' class='customline btn btn-info btn-sm' onclick='navToBaidu()'>百度APP导航</button>
  71.             </div>
  72.         </div>
  73.     </div>
  74.     <!-- 路线规划结果 -->
  75.     <div id='line-result' class='col-lg-12 col-md-12 col-sm-12 col-xs-12' style='padding:10px'></div>
  76. </body>
  78. <script type="text/javascript">
  79.     $(function() {
  80.         initMap('map'); //加载页面初始化map
  81.     })
  83.     //我的当前定位的缓存
  84.     var mypoint = null;
  85.     //地图全局变量
  86.     var map = null;
  87.     //存入两个坐标点供自定义路线导航的栈
  88.     var line = [];
  89.     //单击地图的目标定位
  90.     var target = null;
  92.     /**
  93.      * 地图初始化函数
  94.      */
  95.     function initMap(id) {
  96.         map = new BMap.Map(id); // 创建地图实例
  97.         map.centerAndZoom('北京', 14); //设置中心点
  98.         map.enableScrollWheelZoom(true); //允许滚轮操作
  99.         map.disableDoubleClickZoom(); //关闭双击放大功能
  100.         map.enableKeyboard(); //开启键盘操作功能
  102.         //获取当前定位位置
  103.         var pointGet = setInterval(function() {
  104.             var geolocation = new BMap.Geolocation();
  105.             geolocation.getCurrentPosition(function(r) {
  106.                 if (this.getStatus() == BMAP_STATUS_SUCCESS) {
  107.                     mypoint = r; //将当前获取的位置存入缓存
  108.                     var point = new BMap.Point(r.point.lng, r.point.lat);
  109.                     var label = new BMap.Label('我', {
  110.                         offset : new BMap.Size(3, 3)
  111.                     }); //生成自己的定位的标记
  112.                     label.setStyle({ //修改自己的定位的标记的样式
  113.                         'border' : "none",
  114.                         'background' : 'none',
  115.                         'color' : 'white',
  116.                         'border-radius' : '50%',
  117.                         'width' : '20px',
  118.                         'height' : '20px',
  119.                     })
  120.                     line = []; //初始化线路规划
  121.                     line.push(mypoint); //存入当前自身定位
  122.                     addMarker(mypoint.point, label); //加载标注
  123.                     clearInterval(pointGet); //清除计时器
  124.                 //console.log('您的位置：' + r.point.lng + ',' + r.point.lat);
  125.                 } else {
  126.                     console.error('failed' + this.getStatus());
  127.                     clearInterval(pointGet); //发生错误清除计时器
  128.                 }
  129.             },
  130.                 {
  131.                     enableHighAccuracy : true
  132.                 }
  133.             )
  134.         }, 10000);
  136.         //添加单击监听事件
  137.         map.addEventListener("click", function(e) { //获取一个点的定位存入为目标点
  138.             target = e;
  139.         });
  141.         //搜索框回车键监听
  142.         $('#search-input').keydown(function(e) { //搜索框激活下按键盘回车键执行搜索
  143.             if (event.keyCode == 13) {
  144.                 $("#search-location-btn").click();
  145.             }
  146.         })
  147.     }
  149.     var mapType = 0; //三种地图切换的标记
  150.     function switchMap() {
  151.         if (mapType == 0) {
  152.             map.setMapType(BMAP_HYBRID_MAP); //卫星路网
  153.             mapType = 1;
  154.         } else if (mapType == 1) {
  155.             map.setMapType(BMAP_SATELLITE_MAP); //卫星地图
  156.             mapType = 2;
  157.         } else if (mapType == 2) {
  158.             map.setMapType(BMAP_NORMAL_MAP); //普通地图
  159.             mapType = 0;
  160.         }
  161.     }
  163.     /**
  164.      * 自定义路线监听开启函数
  165.      */
  166.     customLineFlag = false; //自定义路线的开启/关闭标记
  167.     function customLine() {
  168.         if (customLineFlag == false) { //开启自定义路线
  169.             map.addEventListener("click", getLinePoint);
  170.             customLineFlag = true;
  171.             $('#customLine').html('自定义路线开启中');
  172.             $('.customline').show();
  173.         } else { //关闭自定义路线
  174.             map.removeEventListener("click", getLinePoint);
  175.             customLineFlag = false;
  176.             $('#customLine').html('自定义路线已关闭');
  177.             $('.customline').hide();
  178.         }
  179.     }
  181.     /**
  182.      * 自定义路线监听的回调函数
  183.      */
  184.     function getLinePoint(e) {
  185.         if (line.length > 1) { //自定义路线的点有两个
  186.             line.splice(0, 1); //删掉旧的
  187.             line.push(e); //插入新点
  188.         } else { //自定义路线的点不足两个
  189.             line.push(e); //插入新点
  190.         }
  191.         map.clearOverlays(); //清除当前标注
  192.         for (var i = 0; i < line.length; i++) { //重新规划标注
  193.             var point = new BMap.Point(line[i].point.lng, line[i].point.lat);
  194.             var label = new BMap.Label(i == 0 ? "起" : '终', { //标注上的文字
  195.                 offset : new BMap.Size(3, 3) //标注文字偏移到标注中心
  196.             });
  197.             label.setStyle({
  198.                 'border' : "none",
  199.                 'background' : 'none',
  200.                 'color' : 'white',
  201.                 'border-radius' : '50%',
  202.                 'width' : '20px',
  203.                 'height' : '20px',
  204.             })
  205.             addMarker(point, label); //添加标注
  206.         }
  207.     }
  209.     /**
  210.      * 从自身定位点到目标点的线路规划
  211.      */
  212.     //lyhFloatTip的相关代码的链接为:
  213.     function goTo(key) {
  214.         if (null == mypoint) { //自身定位未完成提示
  215.             lyhFloatTip("正在对自己位置进行定位,请稍后...");
  216.             return null;
  217.         }
  218.         if (null == target) { //没有选择目标点
  219.             lyhFloatTip("未点选目标位置!");
  220.             return null;
  221.         }
  222.         var start = new BMap.Point(mypoint.point.lng, mypoint.point.lat);
  223.         var end = new BMap.Point(target.point.lng, target.point.lat);
  224.         removeAll();
  225.         if (key == 'walk') { //徒步,骑行线路规划
  226.             var walking = new BMap.WalkingRoute(map, {
  227.                 renderOptions : {
  228.                     map : map,
  229.                     panel : "line-result", //结果显示面板
  230.                     autoViewport : true,
  231.                 }
  232.             });
  233.             walking.search(start, end); //执行搜索
  234.         } else if (key == 'bus') { //公交线路规划
  235.             var transit = new BMap.TransitRoute(map, {
  236.                 renderOptions : {
  237.                     map : map,
  238.                     panel : "line-result", //结果显示面板
  239.                     autoViewport : true,
  240.                 },
  241.             });
  242.             transit.search(start, end); //执行搜索
  243.         } else if (key == 'car') { //自驾车线路规划
  244.             var driving = new BMap.DrivingRoute(map, {
  245.                 renderOptions : {
  246.                     map : map,
  247.                     panel : "line-result", //结果显示面板
  248.                     autoViewport : true,
  249.                 }
  250.             });
  251.             driving.search(start, end); //执行搜索
  252.         }
  253.         $('#nav-baidu').show(300); //有线路规划后,展示app按钮,可直接进入百度app
  254.     }
  256.     /**
  257.      * 跳转到百度app或百度地图导航的函数
  258.      */
  259.     function navToBaidu() {
  260.         if (null == target) {
  261.             lyhFloatTip("请点击地图选择要导航的目标位置...");
  262.         } else {
  263.             var lng = target.point.lng;
  264.             var lat = target.point.lat;
  265.             window.open("http://api.map.baidu.com/marker?location=" + lat + "," + lng + "&title=目的位置&output=html"); //在新窗口打开连接
  266.             console.log("http://api.map.baidu.com/marker?location=" + lat + "," + lng + "&title=目的位置&output=html"); //打开的链接
  267.         }
  268.     }
  270.     /**
  271.      * 搜索目标位置函数
  272.      */
  273.     function locationSearch() {
  274.         var val = $('#search-input').val();
  275.         var local = new BMap.LocalSearch(map, {
  276.             renderOptions : {
  277.                 map : map
  278.             }
  279.         });
  280.         local.search(val); //以名称搜索位置并显示在地图哄
  281.     }
  283.     /**
  284.      * 定位到自身所在位置的函数
  285.      */
  286.     var mapLocationTimerCount = 0;
  287.     function myLocation() {
  288.         var mapLocationTimer = setInterval(function() {
  289.             if (null != mypoint) {
  290.                 console.log('您的位置：' + mypoint.point.lng + ',' + mypoint.point.lat);
  292.                 //删除之前的定位点
  293.                 var allOverlay = map.getOverlays();
  294.                 for (var i = 0; i < allOverlay.length; i++) {
  295.                     try { //并非每个 getLabel[i]都有getLabel函数,所以报错,远程调用,无法使用typeof判断
  296.                         if (allOverlay[i].getLabel().content == "我") {
  297.                             map.removeOverlay(allOverlay[i]);
  298.                             return false;
  299.                         }
  300.                     } catch (e) {
  301.                         //console.log(e)
  302.                     }
  303.                 }
  304.                 //添加新的定位点
  305.                 var point = new BMap.Point(mypoint.point.lng, mypoint.point.lat);
  306.                 var label = new BMap.Label('我', {
  307.                     offset : new BMap.Size(3, 3)
  308.                 });
  309.                 label.setStyle({
  310.                     'border' : "none",
  311.                     'background' : 'none',
  312.                     'color' : 'white',
  313.                     'border-radius' : '50%',
  314.                     'width' : '20px',
  315.                     'height' : '20px',
  316.                 })
  317.                 line = [];
  318.                 line.push(mypoint); //添加自身定位作为起点
  319.                 addMarker(mypoint.point, label); //添加标注
  320.                 map.panTo(mypoint.point); //将自身定位作为地图中心
  322.                 clearInterval(mapLocationTimer);
  323.             } else {
  324.                 mapLocationTimerCount++;
  325.                 if (mapLocationTimerCount > 30) { //30秒都没定位成功....
  326.                     console.log('30秒都没获取定位点...')
  327.                     mapLocationTimerCount = 0;
  328.                     clearInterval(mapLocationTimer);
  329.                 }
  330.             }
  331.         }, 1000)
  332.     }
  334.     /**
  335.      * 绘制路线 徒步-骑行-公交-驾车
  336.      */
  337.     function myLine(key) {
  338.         if (line.length < 2) { //路线点少于2个提示
  339.             lyhFloatTip("需要两个点才可以进行规划路线!");
  340.             return null;
  341.         }
  343.         var start = new BMap.Point(line[0].point.lng, line[0].point.lat); //获取存入的起点
  344.         var end = new BMap.Point(line[1].point.lng, line[1].point.lat); //获取存入的终点
  345.         map.clearOverlays(); //清除之前的mk
  346.         if (key == 'walk') { //步行,骑行规划
  347.             var walking = new BMap.WalkingRoute(map, {
  348.                 renderOptions : {
  349.                     map : map,
  350.                     panel : "line-result",
  351.                     autoViewport : true,
  352.                 }
  353.             });
  354.             walking.search(start, end);
  355.         } else if (key == 'bus') { //公交规划
  356.             var transit = new BMap.TransitRoute(map, {
  357.                 renderOptions : {
  358.                     map : map,
  359.                     panel : "line-result",
  360.                     autoViewport : true,
  361.                 },
  362.             });
  363.             transit.search(start, end);
  364.         } else if (key == 'car') { //自驾规划
  365.             var driving = new BMap.DrivingRoute(map, {
  366.                 renderOptions : {
  367.                     map : map,
  368.                     panel : "line-result",
  369.                     autoViewport : true,
  370.                 }
  371.             });
  372.             driving.search(start, end);
  373.         }
  374.     }
  376.     /**
  377.      * 创建标注中心带文字的自定义函数
  378.      */
  379.     function addMarker(point, label) {
  380.         var marker = new BMap.Marker(point);
  381.         map.addOverlay(marker);
  382.         marker.setLabel(label);
  383.     }
  385.     /**
  386.      * 删除所有当前标注
  387.      */
  388.     function removeAll() {
  389.         map.clearOverlays();
  390.     }
  391. </script>
  392. </html>

效果如下图:

以上...

一个百度MAP导航的基础封装的更多相关文章

  1. 手机版的百度map封装,使用gps定位

    代码如下,包自己引 包参考 一个百度MAP导航的基础封装 使用的是浏览器调用gps定位 修改了标注的大小 效果如图: 代码...... <!DOCTYPE html> <html&g ...

  2. 实现百度地图导航Demo的语音播报功能

    上文中实现了在本地导入百度地图导航Demo,那么在此基础上如何实现导航的语音播报呢? 一.为该应用申请语音播报(也叫注册) http://developer.baidu.com/map/index.p ...

  3. （转）百度Map API

    转自  http://blog.sina.com.cn/s/blog_6079f38301013sb3.html 一.与地图操作相关的接口哦! (这些接口的开启都是写在执行成功的回调函数那里) map ...

  4. 利用jquery实现百度新闻导航菜单滑动动画

    前言 前两天,群里有人问百度新闻导航是如何实现的,当时由于忙于工作,没有来得及细看,恰好今天有空闲时间,索性就实现一下这个效果吧: 思路与步骤 1.利用UL创建简单横向导航: <!DOCTYPE ...

  5. 【iOS】苹果，百度Map定位使用与总结

    iOS中使用较多的3款地图,google地图.百度地图.苹果自带地图(高德).当中苹果自带地图在中国使用的是高德的数据.苹果在iOS 6之后放弃了使用谷歌地图,而改用自家的地图.在国内使用的较多的就是 ...

  6. 【微信公众平台开发】百度周边搜索接口php封装

    watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcWl2YW4=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/d ...

  7. 【转】手摸手，带你用vue撸后台 系列四(vueAdmin 一个极简的后台基础模板)

    前言 做这个 vueAdmin-template 的主要原因是: vue-element-admin 这个项目的初衷是一个vue的管理后台集成方案,把平时用到的一些组件或者经验分享给大家,同时它也在不 ...

  8. 【Web】利用jquery实现百度新闻导航菜单滑动动画

    前言 前两天,群里有人问百度新闻导航是如何实现的,当时由于忙于工作,没有来得及细看,恰好今天有空闲时间,索性就实现一下这个效果吧: 思路与步骤 1.利用UL创建简单横向导航: <!DOCTYPE ...

  9. 记一个社交APP的开发过程——基础架构选型（转自一位大哥）

    记一个社交APP的开发过程——基础架构选型 目录[-] 基本产品形态 技术选型 最近两周在忙于开发一个社交App,因为之前做过一点儿社交方面的东西,就被拉去做API后端了,一个人头一次完整的去搭这么一 ...

随机推荐

  1. Sql 列转行字符串

    select OrderID,ProdDetailID from A 表A : OrderID,ProdDetailID 1             6 1             7 1       ...

  2. sql按中文数字排序

    有表4张 建表和插入数据sql DECLARE @p_Building TABLE ( id INT , BidName ) ); DECLARE @p_Room TABLE ( id INT , R ...

  3. 新年开篇-ERP和OA集成步骤

    1.备份要升级帐套的数据库 6点 - 6点10分完成 重启 服务器 2.升级数据库 6点30 - 7点 3.配置ERP电子表单和EasyFlow表单 7点 - 7点30分 录入多公司信息(电子签核), ...

  4. Docker-容器数据卷

    docker容器数据卷相当于外置的移动硬盘 docker容器数据卷主要功能是:容器的持久化.容器间继承+共享数据 特点: (1)数据卷可以容器之间共享或重用数据 (2)卷中更改可以直接生效 (3)数据 ...

  5. java "Too small initial heap" 错误

    Tomcat内存配置 JAVA_OPTS="-server -Duser.timezone=GMT+08-Xms1024m -Xmx1024m -XX:PermSize=1024m -Xmn ...

  6. 自动化测试基础篇--Selenium unittest生成测试报告（HTMLTestRunner）

    如何生成HTMLTestRunner测试报告.接上篇文章,对于unittest框架,运行后,测试结果不便于查看,同时多个case存在的时候,可能会导致case result记录不正确的情况. 为此,引 ...

  7. 机器学习入门KNN近邻算法(一)

    1 机器学习处理流程: 2 机器学习分类: 有监督学习 主要用于决策支持,它利用有标识的历史数据进行训练,以实现对新数据的表示的预测 1 分类 分类计数预测的数据对象是离散的.如短信是否为垃圾短信,用 ...

  8. webpack笔记一 起步

    webpack笔记一 起步 安装 对于大多数项目,我们建议本地安装(--save-dev).这可以在引入突破式变更(breaking change)版本时,更容易分别升级项目. 起步 初始化项目 mk ...

  9. docker容器修改hosts文件，重启失效问题解决

    docker容器修改hosts文件 搜了一大批资料,有说需要在docker run --hosts...改:dockerfile改:有点麻烦,下面方案比较好: 参照docker吧(https://ti ...

  10. FetchType与FetchMode的区别

    使用例: @OneToMany(mappedBy="item",cascade=CascadeType.ALL,fetch=FetchType.EAGER) @Fetch(valu ...