<!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> 
//$ak=2051409c59b8d558c7e6bbd0c5c62ffd
 
    <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>

HTML5调用百度地图API获取当前位置并直接导航目的地的方法的更多相关文章

  1. HTML5页面直接调用百度地图API,获取当前位置，直接导航目的地

    <!DOCTYPE html> <html lang="zh-cmn-Hans"> <meta charset="UTF-8"&g ...

  2. HTML5 调用百度地图API地理定位

    <!DOCTYPE html> <html> <title>HTML5 HTML5 调用百度地图API地理定位实例</title> <head&g ...

  3. HTML5调用百度地图API进行地理定位实例

    自从HTML5的标准确定以后,越来越多的网站使用HTML5来进行开发.虽然对HTML5支持的浏览器不是很多,但是依然抵挡不了大伙对HTML5开发的热情.今天为大家带来的是使用HTML5调用百度地图AP ...

  4. 批量调用百度地图API获取地址经纬度坐标

    1 申请密匙 注册百度地图API:http://lbsyun.baidu.com/index.php?title=webapi 点击左侧 “获取密匙” ,经过填写个人信息.邮箱注册等,成功之后在开放平 ...

  5. H5调用百度地图API获取地理位置

    <script src="http://api.map.baidu.com/api?v=2.0&ak=填入申请的AK"></script> < ...

  6. Python调用百度地图API实现批量经纬度转换为实际省市地点（api调用，json解析，excel读取与写入）

    1.获取秘钥 调用百度地图API实现得申请百度账号或者登陆百度账号,然后申请自己的ak秘钥.链接如下:http://lbsyun.baidu.com/apiconsole/key?applicatio ...

  7. Python 读取照片的信息：拍摄时间、拍摄设备、经纬度等，以及根据经纬度通过百度地图API获取位置

    通过第三方库exifread读取照片信息.exifread官网:https://pypi.org/project/ExifRead/ 一.安装exifreadpip install exifread ...

  8. 调用百度地图API的总结

    因为项目要用到百度地图,所以先摸索了一下,各种功能官方都有文档,点击可查看,文章的话我就直接写我用到的功能例子了,要用可以直接复制粘贴~ 一.主要涉及到的几个接口(先申请密钥): 1.技术一:坐标转换 ...

  9. 调用百度地图Api实现的查看地图功能的小插件

    1. 功能 bMap.js 可根据地理位置调用出百度地图,采用弹出框形式 2.用法 var city = '青岛市'; var address = '香港中路'; bMap.init({ city : ...

随机推荐

  1. ajax 拼接html标签 thinkphp

    ajax 拼接html标签  thinkphp框架 一.html部分 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional ...

  2. Oracle TO_DATE() 函数格式化时间【全】

    TO_DATE格式(以时间:2007-11-02   13:45:25为例)          Year:             yy two digits 两位年                显 ...

  3. Java基础——Servlet（四）

    最近一直在学习Servlet,真的有烦躁,一下子要创建好几个文件,服务端.客户端.html页面....学习进度蛮慢的,很容易失掉信心.当学习到cookie时,发现有好多实现是在我们日常生活中可以会遇得 ...

  4. 图解SVN的branch合并到trunk的过程

    SVN branch合并到主线的整个过程相对来说还是比较繁琐的,下面一个图揭示了一个大概的过程: 1. 将branch上的代码update到本地. 2.将branch本地的代码commit到branc ...

  5. Android的Intent你知道多少？

    https://blog.csdn.net/sinat_34383316/article/details/76039483 https://blog.csdn.net/u014492609/artic ...

  6. 【学习笔记】--- 老男孩学Python，day6 字典

    详细方法:http://www.runoob.com/python/python-dictionary.html 1. dict 用大括号{} 括起来. 内部使用key:value的形式来保存数据 { ...

  7. js-ES6学习笔记-编程风格（2）

    1.那些需要使用函数表达式的场合,尽量用箭头函数代替.因为这样更简洁,而且绑定了this. 2.所有配置项都应该集中在一个对象,放在最后一个参数,布尔值不可以直接作为参数. 3.不要在函数体内使用ar ...

  8. WebSerivce与WebAPI的区别

    一.什么是Web Service Web Service技术, 能使得运行在不同机器上的不同应用无须借助附加的.专门的第三方软件或硬件, 就可相互交换数据或集成.依据Web Service规范实施的应 ...

  9. 帆软发布大数据直连引擎FineDirect，对焦大数据BI

    摘要:近日,帆软官方正式发布大数据直连引擎FineDirect模块.通过该模块,企业在应用FineBI原有功能的基础上,可直接对接现有数据源,无论是传统的关系型数据库,还是Hadoop生态圈.Mpp构 ...

  10. 安卓socket聊天

    安卓基于Socket通信(服务器配合) 1.话不多说进入正题,先创建服务端,在Android Studio中创建Java代码,如下图所示: 选择Java Library 需要改名字的自己随意 2.创建 ...