<!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. 用MVC5+EF6+WebApi 做一个小功能(四) 项目分层功能以及文件夹命名

    在上一节,我们完成了一个项目搭建,我们看到的是一个项目的分层架子,那接下来每一层做什么以及需要引用哪些内容呢?在本节内容我们还逐步拆分每一层的功能,顺带添加package包 Trump.Domain ...

  2. C#编译和运行过程图例

    一张图,描述C#编译和运行过程,比较容易记忆理解

  3. vb.net連接Oracle数据库

    Imports Oracle.DataAccess.Client '導入命名空間 Public Class Form1 Dim Sql As String Public SqlTP As Oracle ...

  4. 撩课-Web大前端每天5道面试题-Day33

    1.CommonJS 中的 require/exports 和 ES6 中的 import/export 区别? CommonJS 模块的重要特性是加载时执行, 即脚本代码在 require 的时候, ...

  5. Android的Intent你知道多少？

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

  6. imanager一些常用方法汇总

    一.求和函数(根据键值数组求键值的总和) function sum(arr){ //arr是传入的值数组,格式如["张三","李四","王五" ...

  7. jsonp 实现跨域

    为什么会出现跨域问题 跨域的安全限制都是对浏览器端来说的,服务器端是不存在跨域安全限制的. 浏览器的同源策略限制从一个源加载的文档或脚本与来自另一个源的资源进行交互. 如果协议,端口和主机对于两个页面 ...

  8. h5新增加的存储方法

    h4中使用的cookie把用户信息保存在客户端浏览器,但是它受到很多限制. 大小:最多能存储4k 带宽:它是随着http请求一起发送到服务器的,因此浪费一部分的带宽. 复杂度:操作复杂. h5新增加了 ...

  9. JDK动态代理、CGLib动态代理

    JDK动态代理源码 一.public static Object newProxyInstance ——> 调用下面这个方法二.Class<?> cl = getProxyClass ...

  10. [Ubuntu] 解决 ubuntu 升级时 /boot 空间不足

    经常升级Linux内核,导致更新时警告/boot分区空间不足.这是以为多次升级内核后,导致内核版本太多,清理一下没用的内核文件就行了. 原文地址请保留http://www.cnblogs.com/ro ...