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

<!DOCTYPE html>

<html>

<title>HTML5 HTML5 调用百度地图API地理定位实例</title>

    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

        <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=E4805d16520de693a3fe707cdc962045"></script>

    </head>

    <body style="margin:50px 10px;">

        <div id="status" style="text-align: center"></div>

        <div style="width:600px;height:480px;border:1px solid gray;margin:30px auto" id="container"></div>

    </body>

</html>

<script type="text/javascript">

    window.onload = function() {

        if(navigator.geolocation) {

            document.getElementById("status").innerHTML = "HTML5 Geolocation is supported in your browser.";

                // 百度地图API功能

                var map = new BMap.Map("container");

                var point = new BMap.Point(116.331398,39.897445);

                map.centerAndZoom(point,12);

                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);

                        alert('您的位置：'+r.point.lng+','+r.point.lat);

                    }

                    else {

                        alert('failed'+this.getStatus());

                    }

                },{enableHighAccuracy: true})

        }

    };

</script>

转自：http://blog.csdn.net/goodnew/article/details/7318625

需要使用自己的AK，申请一个百度地图应用即可。

HTML5 调用百度地图API地理定位的更多相关文章

HTML5调用百度地图API进行地理定位实例
自从HTML5的标准确定以后,越来越多的网站使用HTML5来进行开发.虽然对HTML5支持的浏览器不是很多,但是依然抵挡不了大伙对HTML5开发的热情.今天为大家带来的是使用HTML5调用百度地图AP ...
HTML5调用百度地图API获取当前位置并直接导航目的地的方法
<!DOCTYPE html> <html lang="zh-cmn-Hans"> <meta charset="UTF-8&quo ...
跨平台移动开发&lowbar;PhoneGap 使用Geolocation基于所在地理位置坐标调用百度地图API
使用Geolocation基于所在地理位置坐标调用百度地图API 效果图示例代码 <!DOCTYPE html> <html> <head> <title& ...
HTML5页面直接调用百度地图API,获取当前位置，直接导航目的地
<!DOCTYPE html> <html lang="zh-cmn-Hans"> <meta charset="UTF-8"&g ...
调用百度地图Api实现的查看地图功能的小插件
1. 功能 bMap.js 可根据地理位置调用出百度地图,采用弹出框形式 2.用法 var city = '青岛市'; var address = '香港中路'; bMap.init({ city : ...
集成百度地图API实现定位
版权声明:本文为博主原创文章.未经博主同意不得转载. https://blog.csdn.net/u010982006/article/details/32347107 一．百度地图API获取定位 A ...
调用百度地图API的总结
因为项目要用到百度地图,所以先摸索了一下,各种功能官方都有文档,点击可查看,文章的话我就直接写我用到的功能例子了,要用可以直接复制粘贴~ 一.主要涉及到的几个接口(先申请密钥): 1.技术一:坐标转换 ...
【c&num;】Form调用百度地图api攻略及常见问题
首先,在Form中调用百度地图api,我们需要使用webbrowser控件,这个在前面的文章中已经讲过了,可以参照(http://blog.csdn.net/buptgshengod/article/ ...
web开发调用百度地图API + AK申请
web开发调用百度地图API + AK申请要使用百度地图的API我们首先需要在我们的html页面引入js----`` 如何获取百度地图ak: 1.登陆百度地图开发者平台 2.注册百度开发者账号并登陆 ...

随机推荐

varchar后面是否定义长度，还是有区别的
' ' PRINT @year 结果是:2 ) ,' ' PRINT @year 结果是:2015 varchar是否定义长度,还是有区别的,不定义长度的时候,并非我想象中按照实际赋值自动填充,似乎默 ...
iOS开发中的权限
权限分类联网权限相册权限相机.麦克风权限定位权限推送权限通讯录权限日历.备忘录权限联网权限引入头文件 @import CoreTelephony; 应用启动后,检测应用中是否有联网权 ...
Java学习笔记（二）UML基础
用例图:代表系统的一个功能模块,仅仅是系统功能的描述.用例图包括:用例.角色.角色和用例之间的关系以及系统内用例之间的关系. 类图:表示系统中包含哪些实体,各实体之间如何关联. 类图除了表示实体内部结 ...
vim编程插入保存不退出保存退出退出不保存另存为其他文件名保存覆盖现有文件
---恢复内容开始--- 在xshell里写代码,如果需要编辑代码,可以输入 vim+ xxx.py ,进入vim编辑界面这里的xxx.py表示 python的存储文件,后缀名是.py. 1． ...
一百万数据索引实例測试--mysql
推荐书籍:http://pan.baidu.com/s/1sjJIyRV 任务描写叙述: 如果一高频查询例如以下 SELECT * FROM user WHERE area='amoy' AND s ...
Html的&lt&semi;meta&gt&semi;标签使用方法及用例
浏览器支持所有浏览器都支持 <meta> 标签. 定义和用法 <meta> 元素可提供有关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和 ...
Robot Framework学习笔记
robot framework 上个用例的输出作为下个用例的输入 (Set Global Variable的用法) 注意:如果直接在suite里定义变量,变量在suite里的用例里只能应用,修改的效果 ...
Elasticsearch--Aggregation详细总结（聚合统计）
Elasticsearch的Aggregation功能也异常强悍. Aggregation共分为三种:Metric Aggregations.Bucket Aggregations. Pipeline ...
洛谷P3258 松鼠的新家
树上差分这应该是一道很简单的树上差分了..就是问每个点被覆盖了多少次. 要注意我们最后dfs后,要把除第一个节点以外的所有点的-1,因为有些点作为起点和终点覆盖了两次,按照题目意思是不用覆盖两次的. ...
Linux服务器---流量监控MRTG
MRTG MRTG可以分析网络流量,但是它必须依赖SNMP协议.将收集到的数据生成HTML文件,以图片的形式展示出来 1.安装一些依赖软件 [root@localhost bandwidthd-2.0 ...