<!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. 【Java并发编程】10、Java 理论与实践: 正确使用 Volatile 变量

    转自:http://www.importnew.com/15842.html Java 语言中的 volatile 变量可以被看作是一种 “程度较轻的 synchronized”:与 synchron ...

  2. SourceTree这是一个无效的源路径

    工具->选项:修改一般下面的SSH客户端为OpenSSH

  3. 启动SpringBoot项目

    Eclipse创建Spring Boot项目 1.访问http://start.spring.io/ 解压引入Maven项目 2.建议的目录结构 com +- example +- myproject ...

  4. 百度智能小程序弹窗组件wcPop|智能小程序自定义model弹窗模板

    百度智能小程序自定义弹窗组件wcPop|百度小程序model对话框|智能小程序弹窗界面模板 最近百度也推出了自己的智能小程序,如是就赶紧去试了下,官方提供的api还不是狠完整.而且官方提供的弹窗组件也 ...

  5. intellij idea 2016.3.5 控制台取消行数限制

    有时候我们要输出大量的信息放到控制台显示,但是多了之后就出现最上面的信息被覆盖删除, 因此就需要设置控制台的显示行数,但在idea7之后的版本中,取消了对控制台行数设置选项, 只能通过更改配置文件进行 ...

  6. js-数字、字符串、布尔值的转换方式

    来自JavaScript秘密花园 1.转换为字符串 '' + 10 === '10'; // true 将一个值加上空字符串可以轻松转换为字符串类型. 2.字符串转换为数字 +'010' === 10 ...

  7. require.js的基本概念及使用流程（1）

    今天,我们来说一说requireJS的基本概念,在下一篇随笔中我们再去讨论讨论requireJS的使用步骤 这一篇都是一些概念性比较强的东西,希望大家擦亮自己的钛合金狗眼好好看看概念,好吧 首先,什么 ...

  8. JAVA中销毁session的代码

    ServletActionContext.getRequest().getSession().invalidate();

  9. CSS实现英文或拼音单词首字母大写

    CSS实现英文或拼音单词首字母大写,只需要在css样式中加入: text-transform: capitalize 即可. 测试代码如下: <!doctype html> <htm ...

  10. 【VS2015】Win7 X64上面安装VS2015

    环境: 1.Win7 x64 SP1旗舰版 2.VS2015专业版Update3 3.IE11 4.WDK10 5.SDK10   安装步骤: 1.安装IE11,需要如下补丁:     a.Windo ...