<!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. [日常] go语言圣经-声明,变量,赋值,类型,包和文件习题

    go语言圣经-声明1.四种类型的声明语句:var.const.type和func,分别对应变量.常量.类型和函数实体对象的声明2.包一级声明语句声明的名字可在整个包对应的每个源文件中访问,局部声明的名 ...

  2. 几点建议，让Redis在你的系统中发挥更大作用

    Redis在很多方面与其他数据库解决方案不同:它使用内存提供主存储支持,而仅使用硬盘做持久性的存储:它的数据模型非常独特,用的是单线程.另一个大区别在于,你可以在开发环境中使用Redis的功能,但却不 ...

  3. JVM调优的总结

    堆大小设置JVM 中最大堆大小有三方面限制:相关操作系统的数据模型(32-bt还是64-bit)限制:系统的可用虚拟内存限制:系统的可用物理内存限制.32位系统下,一般限制在1.5G~2G:64为操作 ...

  4. [小技巧]Filezilla无法确定拖放操作目标,由于shell未正确安装__解决办法

    重装系统及相关软件之后,用filezilla拖拽ftp上的文件到桌面的时候,提示"无法确定拖放操作目标......" 解决办法很简单,执行如下几步就OK了 ①在CMD中,进入Fil ...

  5. HDU3605(KB11-M 状态压缩+最大流)

    Escape Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others)Total Subm ...

  6. JS实现选择菜单栏（配合慕课网淘宝搜索框的课程）

    以下是关于实现慕课网淘宝搜索框的JS代码,不过只有选择菜单栏(其余比较容易实现). <!doctype html> <html> <head> <!--在IE ...

  7. js-权威指南学习笔记19.2

    1.jQuery动画是异步的,会立刻返回,但动画会在后台执行,可传入函数作为动画完成的回调函数. 2.jQuery动画默认是队列化的. 3.stop()方法接受两个可选的布尔值参数,如果第一个参数是t ...

  8. AJAX 简单归纳 -- 前端知识

    什么是 AJAX ? AJAX = 异步 JavaScript 和 XML. AJAX 是一种用于创建快速动态网页的技术. 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味 ...

  9. 使用标准C读取文件遇到的结构体对齐问题及其解决办法

    作者:朱金灿 来源:http://blog.csdn.net/clever101 同事使用标准C库读取文件,发现总是读取不对,让我帮忙看一下. 原来他定义了如下一个结构体: // 定义块的结构 typ ...

  10. 排错-windows平台下访问oracle em出现空白的解决方法

    排错-windows平台下访问oracle em出现空白的解决方法 by:授客 QQ:1033553122 问题描述 IE浏览器本地访问oem,出现空白页面,就左上角有一行字符 http://loca ...