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 calc()会计算属性详解
Feb 27 HTML / CSS
使用CSS3的font-face字体嵌入样式的方法讲解
May 13 HTML / CSS
CSS3颜色值RGBA与渐变色使用介绍
Mar 06 HTML / CSS
详解HTML5 LocalStorage 本地存储
Dec 23 HTML / CSS
HTML5: Web 标准最巨大的飞跃
Oct 17 HTML / CSS
关于HTML5你必须知道的28个新特性,新技巧以及新技术
May 28 HTML / CSS
HTML5画渐变背景图片并自动下载实现步骤
Nov 18 HTML / CSS
html5中使用hotcss.js实现手机端自适配的方法
Apr 23 HTML / CSS
遮罩层 + Iframe实现界面自动显示的示例代码
Apr 26 HTML / CSS
为什么你写的height:100%不起作用
May 10 HTML / CSS
html+css实现分层金字塔的实例
Jun 02 HTML / CSS
能用CSS实现的就不要麻烦JavaScript了
Oct 05 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
PHP5在Apache下的两种模式的安装
2006/09/05 PHP
谈谈PHP的输入输出流
2007/02/14 PHP
用PHP实现小写金额转换大写金额的代码(精确到分)
2012/01/10 PHP
PHP获取一年中每个星期的开始和结束日期的方法
2015/02/12 PHP
jQuery学习笔记(2)--用jquery实现各种模态提示框代码及项目构架
2013/04/08 Javascript
JQuery中如何传递参数如click(),change()等具体实现
2013/04/28 Javascript
jquery子元素过滤选择器使用示例
2013/06/24 Javascript
使用Jquery获取带特殊符号的ID 标签的方法
2014/04/30 Javascript
JavaScript如何实现在文本框(密码框)输入提示语
2015/12/25 Javascript
轻松实现jquery手风琴效果
2016/01/14 Javascript
Bootstrap实现带暂停功能的轮播组件(推荐)
2016/11/25 Javascript
JS中静态页面实现微信分享功能
2017/02/06 Javascript
gulp解决跨域的配置文件问题
2017/06/08 Javascript
JS获取一个表单字段中多条数据并转化为json格式
2017/10/17 Javascript
VUE饿了么树形控件添加增删改功能的示例代码
2017/10/17 Javascript
vue中设置height:100%无效的问题及解决方法
2018/07/27 Javascript
JavaScript数值类型知识汇总
2019/11/17 Javascript
javascript使用canvas实现饼状图效果
2020/09/08 Javascript
小程序自定义圆形进度条
2020/11/17 Javascript
javascript实现电商放大镜效果
2020/11/23 Javascript
全面了解python字符串和字典
2016/07/07 Python
python如何获取服务器硬件信息
2017/05/11 Python
遗传算法之Python实现代码
2017/10/10 Python
Python机器学习之K-Means聚类实现详解
2018/02/22 Python
django 配置阿里云OSS存储media文件的例子
2019/08/20 Python
html5构建触屏网站之touch事件介绍
2013/01/07 HTML / CSS
植村秀美国官网:Shu Uemura美国
2019/03/19 全球购物
adidas菲律宾官网:adidas PH
2020/02/07 全球购物
介绍一下SQL中union,intersect和minus
2012/04/05 面试题
Servlet面试题库
2015/07/18 面试题
餐饮总经理岗位职责
2014/03/07 职场文书
乡镇消防工作实施方案
2014/03/27 职场文书
党的群众路线教育实践活动党员个人剖析材料
2014/10/08 职场文书
学校体育节班级口号
2015/12/25 职场文书
Spring Bean的实例化之属性注入源码剖析过程
2021/06/13 Java/Android
无线电通信名词解释
2022/02/18 无线电