<!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，申请一个百度地图应用即可。

相关参考：

http://blog.csdn.net/zhang_shi_yu920/article/details/51469329

http://blog.163.com/hongshaoguoguo@126/blog/static/1804698120149249044488/

http://blog.csdn.net/cyzero/article/details/42584193

百度地图开放平台：

http://lbsyun.baidu.com/

百度地图API实例：

http://lbsyun.baidu.com/jsdemo.htm#a1_2

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

  1. HTML5调用百度地图API进行地理定位实例

    自从HTML5的标准确定以后,越来越多的网站使用HTML5来进行开发.虽然对HTML5支持的浏览器不是很多,但是依然抵挡不了大伙对HTML5开发的热情.今天为大家带来的是使用HTML5调用百度地图AP ...

  2. HTML5调用百度地图API获取当前位置并直接导航目的地的方法

    <!DOCTYPE html> <html lang="zh-cmn-Hans">     <meta charset="UTF-8&quo ...

  3. 跨平台移动开发_PhoneGap 使用Geolocation基于所在地理位置坐标调用百度地图API

    使用Geolocation基于所在地理位置坐标调用百度地图API 效果图 示例代码 <!DOCTYPE html> <html> <head> <title& ...

  4. HTML5页面直接调用百度地图API,获取当前位置，直接导航目的地

    <!DOCTYPE html> <html lang="zh-cmn-Hans"> <meta charset="UTF-8"&g ...

  5. 调用百度地图Api实现的查看地图功能的小插件

    1. 功能 bMap.js 可根据地理位置调用出百度地图,采用弹出框形式 2.用法 var city = '青岛市'; var address = '香港中路'; bMap.init({ city : ...

  6. 集成百度地图API实现定位

    版权声明:本文为博主原创文章.未经博主同意不得转载. https://blog.csdn.net/u010982006/article/details/32347107 一．百度地图API获取定位 A ...

  7. 调用百度地图API的总结

    因为项目要用到百度地图,所以先摸索了一下,各种功能官方都有文档,点击可查看,文章的话我就直接写我用到的功能例子了,要用可以直接复制粘贴~ 一.主要涉及到的几个接口(先申请密钥): 1.技术一:坐标转换 ...

  8. 【c#】Form调用百度地图api攻略及常见问题

    首先,在Form中调用百度地图api,我们需要使用webbrowser控件,这个在前面的文章中已经讲过了,可以参照(http://blog.csdn.net/buptgshengod/article/ ...

  9. web开发调用百度地图API + AK申请

    web开发调用百度地图API + AK申请 要使用百度地图的API我们首先需要在我们的html页面引入js----`` 如何获取百度地图ak: 1.登陆百度地图开发者平台 2.注册百度开发者账号并登陆 ...

随机推荐

  1. 压缩包法安装mysql

    之前一直安装mysql,我一直是用压缩包安装的.如果之前安装过Mysql,必须要删除注册文件,才能把Mysql彻底删除了. 先在官网下载mysql的版本.下载package版本,即.zip版本的.下载 ...

  2. [bzoj2648]SJY摆棋子(带插入kd-tree)

    解题关键:带插入kdtree模板题. #include<iostream> #include<cstdio> #include<cstring> #include& ...

  3. Mule ESB 安装基本配置要求

    Hardware Requirements* 2GHz, dual-core CPU, or 2 virtual CPUs in virtualized environments 2GB of RAM ...

  4. spring4-2-bean配置-1-依赖注入

    配置 bean,本章节中主要介绍蓝色文字部分. 配置形式:基于 XML 文件的方式:基于注解的方式 Bean 的配置方式:通过全类名(反射).通过工厂方法(静态工厂方法 & 实例工厂方法).F ...

  5. 抓包工具Fidder移动端HTTP请求抓包详解

    第一步:下载神器Fiddler,下载链接: http://fiddler2.com/get-fiddler 下载完成之后,傻瓜式的安装一下了! 第二步:设置Fiddler打开Fiddler,     ...

  6. mybaties 一对多关系映射

    背景: 数据库格式如下图所示 现在要统计出在一段时间内dimension_type为op即所有运营商的pv.uv.vv等指标的数组,以便页面显示出每个运营商在该事件段内历史指标曲线图. 分析: 返回的 ...

  7. vmware centos7 静态ip设置

    最近在学习linux环境部署~~~~ 首先,将网络适配设置成为桥接模式 查看本机IP地址,ipconfig,记住ipv4地址和默认网关地址,等会配置的时候要用 启动Centos,进入终端模式,设置IP ...

  8. code1744 方格染色

    稍微复杂一点的划分dp 设f[i][j][k]为第i行前j个k次粉刷正确的最大值 由于每行循环使用,可以去掉第一维,但每次不要忘了清零(卡了好久) f[j][k]=max{ f[u][j-1] + m ...

  9. Python和JavaScript间代码转换4个工具

    Python 还是 JavaScript?虽然不少朋友还在争论二者目前谁更强势.谁又拥有着更为光明的发展前景,但毫无疑问,二者的竞争在 Web 前端领域已经拥有明确的答案.立足于浏览器平台,如果放弃 ...

  10. PHP发红包程序限制红包的大小

    我们先来分析下规律. 设定总金额为10元,有N个人随机领取: N=1 第一个 则红包金额=X元: N=2 第二个 为保证第二个红包可以正常发出,第一个红包金额=0.01至9.99之间的某个随机数. 第 ...