HTML5页面直接调用百度地图API获取当前位置直接导航目的地的实现代码


Posted in HTML / CSS onMarch 02, 2018

我是应用在微信中,自定义菜单,菜单直接链接到这个HTML5页面,获取当前位置后,页面中定好目的地,这样打开页面后直接进入导航页面

可以省下先发送位置信息后,点确定再出导航,省一步,

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <title>HTML5页面直接调用百度地图API,获取当前位置,直接导航目的地</title>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=wDYEcxgRRheZwyC9jpN1Tt7fzr2zjosZ"></script>  
    <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script><!--调用jQuery-->
  <style type="text/css">
        body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
    </style> 
</head>
<body>  
   <div id="allmap"></div>
</body>  
</html>  
<script type="text/javascript">  
    var map = new BMap.Map("allmap");  
    var point = new BMap.Point(116.709684,39.89778);
    map.centerAndZoom(point, 16);  
    map.enableScrollWheelZoom(); 
    var myIcon = new BMap.Icon("myicon.png",new BMap.Size(30,30),{
        anchor: new BMap.Size(10,10)    
    });
    var marker=new BMap.Marker(point,{icon: myIcon});  
    map.addOverlay(marker);  
    var geolocation = new BMap.Geolocation();
    geolocation.getCurrentPosition(function(r){
        if(this.getStatus() == BMAP_STATUS_SUCCESS){
            var mk = new BMap.Marker(r.point);
            map.addOverlay(mk);
            //map.panTo(r.point);//地图中心点移到当前位置
            var latCurrent = r.point.lat;
            var lngCurrent = r.point.lng;
            //alert('我的位置:'+ latCurrent + ',' + lngCurrent);
            location.href="http://api.map.baidu.com/direction?origin="+latCurrent+","+lngCurrent+"&destination=39.89778,116.709684&mode=driving®ion=北京&output=html";
        }
        else {
            alert('failed'+this.getStatus());
        }        
    },{enableHighAccuracy: true})
    map.addOverlay(marker);  
    var licontent="<b>健龙森羽毛球馆</b><br>";  
        licontent+="<span><strong>地址:</strong>北京市通州区滨河中路108号</span><br>";  
        licontent+="<span><strong>电话:</strong>(010)81556565 / 6969</span><br>";          
    var opts = { 
        width : 200,
        height: 80,
    };         
    var  infoWindow = new BMap.InfoWindow(licontent, opts);  
    marker.openInfoWindow(infoWindow);  
    marker.addEventListener('click',function(){
        marker.openInfoWindow(infoWindow);
    });  
</script>

总结

以上所述是小编给大家介绍的HTML5页面直接调用百度地图API获取当前位置直接导航目的地的实现代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

HTML / CSS 相关文章推荐
CSS3属性使网站设计增强同时不消弱可用性
Aug 29 HTML / CSS
详解CSS 3 中的 calc() 方法
Jan 12 HTML / CSS
CSS3关于z-index不生效问题的解决
Feb 19 HTML / CSS
CSS3 rgb and rgba(透明色)的使用详解
Sep 25 HTML / CSS
css3 利用transform打造走动的2D时钟
Oct 20 HTML / CSS
html5 localStorage本地存储_动力节点Java学院整理
Jul 06 HTML / CSS
HTML5+CSS3应用详解
Feb 24 HTML / CSS
H5新属性audio音频和video视频的控制详解(推荐)
Dec 09 HTML / CSS
htnl5利用svg页面高斯模糊的方法
Jul 20 HTML / CSS
如何在Canvas中添加事件的方法示例
May 21 HTML / CSS
AmazeUi Tree(树形结构) 应用小结
Aug 17 HTML / CSS
CSS子盒子水平和垂直居中的五种方法
Jul 23 HTML / CSS
基于MUI框架使用HTML5实现的二维码扫描功能
Mar 01 #HTML / CSS
canvas裁剪clip()函数的具体使用
Mar 01 #HTML / CSS
html5.2 dialog简介详解
Feb 27 #HTML / CSS
Html5页面中的返回实现的方法
Feb 26 #HTML / CSS
简述Html5 IphoneX 适配方法
Feb 08 #HTML / CSS
canvas实现按住鼠标移动绘制出轨迹的示例代码
Feb 05 #HTML / CSS
canvas绘制视频封面的方法
Feb 05 #HTML / CSS
You might like
第九节 绑定 [9]
2006/10/09 PHP
mysql中存储过程、函数的一些问题
2007/02/14 PHP
114啦源码(114la)不能生成地方房产和地方报刊问题4级页面0字节的解决方法
2012/01/12 PHP
更改localhost为其他名字的方法
2014/02/10 PHP
详解PHP的抽象类和抽象方法以及接口总结
2019/03/15 PHP
小议Function.apply() 之一------(函数的劫持与对象的复制)
2006/11/30 Javascript
JQUERY CHECKBOX全选,取消全选,反选方法三
2008/08/30 Javascript
javascript 子窗体父窗体相互传值方法
2010/05/31 Javascript
五段实用的js高级技巧
2011/12/20 Javascript
uploadify 3.0 详细使用说明
2012/06/18 Javascript
js 实现日期灵活格式化的小例子
2013/07/14 Javascript
js如何判断用户是在PC端和还是移动端访问
2014/04/24 Javascript
基于JavaScript代码实现pc与手机之间的跳转
2015/12/23 Javascript
基于jquery实现鼠标左右拖动滑块滑动附源码下载
2015/12/23 Javascript
AngularJS入门教程之AngularJS 模板
2016/08/18 Javascript
Bootstrap导航条的使用和理解3
2016/12/14 Javascript
强大的 Angular 表单验证功能详细介绍
2017/05/23 Javascript
js中bool值的转换及“&amp;&amp;”、“||”、 “!!”详解
2017/12/21 Javascript
Vue2.0结合webuploader实现文件分片上传功能
2018/03/09 Javascript
更改BootStrap popover的默认样式及popover简单用法
2018/09/13 Javascript
vue插槽slot的理解和使用方法
2019/04/03 Javascript
在VUE中使用lodash的debounce和throttle操作
2020/11/09 Javascript
python爬虫 使用真实浏览器打开网页的两种方法总结
2018/04/21 Python
使用python读取csv文件快速插入数据库的实例
2018/06/21 Python
python多进程间通信代码实例
2019/09/30 Python
在notepad++中实现直接运行python代码
2019/12/18 Python
在线服装零售商:SheIn
2016/07/22 全球购物
你常见到的runtime exception
2016/09/05 面试题
计算机网络专业推荐信
2013/11/24 职场文书
医疗纠纷协议书
2014/04/16 职场文书
考博专家推荐信
2014/05/10 职场文书
党的群众路线教育实践活动个人批评与自我批评
2014/10/16 职场文书
爱岗敬业事迹材料
2014/12/24 职场文书
联村联户简报
2015/07/21 职场文书
Django实现WebSocket在线聊天室功能(channels库)
2021/09/25 Python
Rhit高效可视化Nginx日志查看工具
2021/11/01 Servers