<!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. EasyUI 添加一行的时候 行号出现负数的解决方案

    原因是:在jquery_easyui.js 看方法 insertRow : function(_736, _737, row) 以下小代码算行号,if (opts.pagination) { _73c ...

  2. .NET世界的包管理器——Nuget

    NugetServer 使用指南 为什么要使用Nuget 在我们的项目, 存在着一些公共Dll, 这些Dll被大量的项目所引用.同时这些公共dll也同时在进行版本升级, 由于缺乏版本管理,这些Dll会 ...

  3. Java基础——字符编码

    一.ASII 美国(国家)信息交换标准(代)码. 计算机中只有数字,一切都是用数字表示,屏幕上显示的一个一个的字符也不例外. 一个字节可表示的数字为0-255,足以显示键盘上的所有的字符 例如. a ...

  4. Java基础——可变参数

    大家都知道main方法的参数就是一个数组类型的,那么它其实也是可以改成不定参数类型.我试了试,并调用了一些弹出来的方法. public class ClassC2 { public static vo ...

  5. 快速导出云服务器mysql的表数据

    1.许多互联网应用的数据库都布署在远程的Linux云服务器上,我们经常要编辑表数据,导出表数据. 通常的做法是ssh连接到服务器,然后命令登录,命令查询导出数据,费时费力,效率低下. 安装TreeSo ...

  6. 自定义高级版python线程池

    基于简单版创建类对象过多,现自定义高级版python线程池,代码如下 #高级线程池 import queue import threading import time StopEvent = obje ...

  7. python-代理模式

    源码地址:https://github.com/weilanhanf/PythonDesignPatterns 说明: 模式动机 通过引入一个新的对象(如小图片和远程代理对象)来实现对真实对象的操作或 ...

  8. 第二十九天- socketserver模块 ftp上传

    1.socketserver模块: socketserver,它提供了服务器中心类,可简化网络服务器的开发,内部使用IO多路复用以及“多线程”和“多进程”,从而实现并发处理多个客户端请求的socket ...

  9. IDEA项目搭建三——简单配置Maven使用国内及本地仓库

    大家在前面创建时发现Maven下载jar包的时候会很慢,我们又引入了自己的Maven,所以可以配置一下不让其去国外下载jar包,而使用国内的镜像站来加快下载速度 1.找到Maven所在文件夹 2.在c ...

  10. Flutter 数据模型创建

    build_runner的使用 1.在根目录运行 2.一次性创建.g.dart文件 使用build 此时目录内不能有.g.dart文件 3.watch是监听 有model类的文件创建 自动创建.g.d ...