• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >html5 > HTML5调用百度地图API获取当前位置并直接导航目的地的方法

HTML5调用百度地图API获取当前位置并直接导航目的地的方法

作者:匿名 字体:[增加 减小] 来源:互联网 时间:2018-12-03

本文主要包含HTML5,api,获取等相关知识,匿名希望在学习及工作中可以帮助到您
本文主要和大家介绍了HTML5页面直接调用百度地图API获取当前位置直接导航目的地的实现代码,需要的朋友可以参考下,希望能帮助到大家。

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


<!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>  
   <p id="allmap"></p>
</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&region=北京&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>

相关推荐:

js 调用百度地图api并在地图上进行打点添加标注_javascript技巧

以上就是HTML5调用百度地图API获取当前位置并直接导航目的地的方法的详细内容,更多请关注微课江湖其它相关文章!

您可能想查找下面的文章:

  • HTML5知识点总结
  • HTML5的本地存储
  • HTML5本地存储之IndexedDB
  • Html5实现文件异步上传功能
  • Html5新标签datalist实现输入框与后台数据库数据的动态匹配
  • 详解HTML5 window.postMessage与跨域
  • HTML5拖放API实现拖放排序的实例代码
  • 解决html5中video标签无法播放mp4问题的办法
  • HTML5新特性 多线程(Worker SharedWorker)
  • Html5新增标签有哪些

相关文章

  • 2018-12-03xhtml和html有什么区别?
  • 2018-12-03html5 学习简单的拾色器 _html5教程技巧
  • 2017-08-06使用jquery实现HTML5响应式导航菜单教程
  • 2018-12-03物联网的实时性问题 B/S架构的客户端Socket编程?
  • 2018-12-03作为一个前端工程师,是往node方面转,还是往HTML5方面转?
  • 2018-12-03html5有哪些清空画布的方法
  • 2018-12-03HTML5<datalist>标签有哪些属性?HTML5<datalist>标签的具体用法(附实例)
  • 2018-12-03html5和js绘制图片到canvas的方法
  • 2018-12-03基于HTML标签marquee实现滚动效果的简单方法
  • 2018-12-03phonegap使用方法介绍(二)获取位置信息

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • html5小游戏在微信朋友圈火,你怎么看这件事?
    • H5怎么操作本地存储和本地数据库
    • 整体而言,游戏是创意难还是开发难?
    • HTML5有哪些新特征_html5教程技巧
    • h5的游戏开发详解
    • HTML5之语义标签介绍
    • HTML5 Canvas实现图片缩放、翻转、颜色渐变的代码示例
    • 三天学会HTML5 ——多媒体元素的使用
    • html5跨域通讯之postMessage的用法总结
    • 一个模仿微信群聊的H5页面

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有