代码：

<!DOCTYPE html>

<html>

<head>

	<meta charset="utf-8" />

	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

	<style type="text/css">

	*{margin:0;padding:0;}

	#container{width:992px;height:292px;border:4px solid rgba(0,0,0,.3)}

	</style>

	<script type="text/javascript" src="http://api.map.baidu.com/api?key=abcd&v=1.4&services=true"></script>

	<title>地图展示</title>

</head>

<body>

<div id="container"></div>

<script type="text/javascript">

(function getLocation()

  {

  if (navigator.geolocation)

    {

    navigator.geolocation.getCurrentPosition(bMap);

    }

  else{alert("Geolocation is not supported by this browser.");}

  })();

function bMap(position){

var map = new BMap.Map("container");          // 创建地图实例

var point = new BMap.Point(position.coords.longitude, position.coords.latitude);  // 创建点坐标

map.centerAndZoom(point, 15);                 // 初始化地图，设置中心点坐标和地图级别

var marker = new BMap.Marker(point);  // 创建标注

	map.addOverlay(marker);              // 将标注添加到地图中

var label = new BMap.Label("我在这里哦",{offset:new BMap.Size(20,-10)});

marker.setLabel(label);

}

</script>

</body>

</html>

看看效果图：

注意：利用百度地图API接口时，v1.5版本后的需要申请密钥，本例用的是v1.4版本。

利用HTML5 Geolocation API在百度地图中显示你的位置的更多相关文章

  1. html5定位并在百度地图上显示

    在开发移动端 web 或者webapp时,使用百度地图 API 的过程中,经常需要通过手机定位获取当前位置并在地图上居中显示出来,这就需要用到html5的地理定位功能. navigator.geolo ...

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

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

  3. HTML5 Geolocation API地理定位整理（二）

    Geolocation 实例demo 1.使用watchPosition()监听客户端位置 var watchOne=null; if (navigator.geolocation) { //watc ...

  4. 去百度API的百度地图准确叠加和坐标转换的解决方案研究

    文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/. 1.背景 目前项目上如果要使用百度地图,得加载百度的开发包,然后通过百 ...

  5. HTML5 Geolocation API工作原理[转载]

    大家都知道,HTML5 Geolocation 可以使用 IP 地址.基于 Web 的数据库.无线网络连接和三角测量或 GPS 技术来确定经度和纬度. 问题: 在一个基于地理位置服务的个人业余项目(小 ...

  6. HTML5 Geolocation API地理定位整理（一）

    HTML5 Geolocation API 用于获得用户的地理位置. 鉴于该特性可能侵犯用户的隐私,除非用户同意,否则用户位置信息是不可用的. 浏览器支持 Internet Explorer 9+, ...

  7. 百度地图中如何获取到发布的SHA1

    百度地图中如何获取到发布的SHA1 下面介绍的是一种通过命令的方式获取到发布版SHA1的方法: 打开Android的命令行Terminal: 1.首先进入到.android文件所在的目录,我的是如下图 ...

  8. HTML5地理定位，百度地图API，知识点熟悉

    推断浏览器的兼容问题: IE9+支持地理定位,FF Chrome新版支持地理定位  if (navigator.geolocation) {        alert('支持地理定位');   } e ...

  9. html5定位获取当前位置并在百度地图上显示

    用html5的地理定位功能通过手机定位获取当前位置并在地图上居中显示出来,下面是百度地图API的使用过程,有需要的朋友可以参考下 在开发移动端 web 或者webapp时,使用百度地图 API 的过程 ...

随机推荐

  1. JS插件excanvas的使用方法

     这个还没有想好怎么写,等写好后再发布 试用了excanvas.js,生成静态统计图 IE下使用excanvas.js的注意事项

  2. 212. Word Search II

    题目: Given a 2D board and a list of words from the dictionary, find all words in the board. Each word ...

  3. sqlmap批量扫描burpsuite请求日志记录

    sqlmap可以批量扫描包含有request的日志文件,而request日志文件可以通过burpsuite来获取, 因此通过sqlmap结合burpsuite工具,可以更加高效的对应用程序是否存在SQ ...

  4. (从终端看linux-2)浅析terminal创建时ptmx和pts关系

    我们打开一个terminal,那么将会在devpts文件系统/dev/pts下创建一个对应的pts字符文件,该pts字符文件节点直接由/dev/ptmx节点的驱动函数ptmx_open()调用devp ...

  5. The document has been modified outside of Code Composer. Would you like to reload the file

    2013-06-20 10:03:32 烧写过程是合众达给出的文档 problem: I'm new to using Code Composer Studio 3.3 and am having a ...

  6. Javascript String类的属性及方法

    String 类 Attribute and method anchor()              创建一个<a>标签的实例,将其name属性设置为被传递给此方法的字符串 big()  ...

  7. VS2010调试 --指南 Reference from : http://blog.csdn.net/kingzone_2008/article/details/8133048

    1 导言 在软件开发周期中,测试和修正缺陷(defect,defect与bug的区别:Bug是缺陷的一种表现形式,而一个缺陷是可以引起多种Bug的) 的时间远多于写代码的时间.通常,debug是指发现 ...

  8. 使用C#创建计划任务(How to create a Task Scheduler use C# )

    本文主要讲解了如何使用C#来创建windows计划任务. 需求:在不定时间段运行多个后台程序(winfrom,wpf,console,等等)用于更新数据.  问题:为什么要使用计划任务,而不直接在程序 ...

  9. UVa 11440 (欧拉函数) Help Tomisu

    题意: 给出N和M,统计区间x ∈ [2, N!],x满足所有素因子都大于M的x的个数. 分析: 首先将问题转化一下,所有素因子都大于M 等价于 这个数与M!互素 对于k大于M!,k与M!互素等价于 ...

  10. 【 随笔 】 D3 难吗？

    有不少朋友说学 D3 挺难的.为什么呢?想写一篇文章分析分析. 1. D3 出现的背景 D3.js 是 Github 上的一个开源项目,用于数据可视化.作者是 Mike Bostock,纽约时报的工程 ...