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

  1. navigator.geolocation.getCurrentPosition(callback);

在获取坐标成功之后会执行回调函数 callback; callback 方法的参数就是获取到的坐标点；然后可以初始化地图，设置控件、中心点、缩放等级，然后给地图添加point的overlay：

  1. var map = new BMap.Map("mapDiv");//mapDiv为放地图的 div 的 id
  2. map.addControl(new BMap.NavigationControl());
  3. map.addControl(new BMap.ScaleControl());
  4. map.addControl(new BMap.OverviewMapControl());
  5. map.centerAndZoom(point, 15);//point为坐标点，15为地图缩放级别，最大级别是 18
  6. var pointMarker = new BMap.Marker(point);
  7. map.addOverlay(pointMarker);

然而事实上这样还不够，显示出来的结果并不准，这是因为 getCurrentPosition 获取到的坐标是 GPS 经纬度坐标，而百度地图的坐标是经过特殊转换的，所以，在获取定位坐标和初始化地图之间需要进行一步坐标转换工作，该转换方法百度API里面已经提供了，转换一个点或者批量装换的方法均有提供：单个点转换需引用 http://developer.baidu.com/map/jsdemo/demo/convertor.js，批量转换需引用 http://developer.baidu.com/map/jsdemo/demo/changeMore.js，这里只需要前者即可：

  1. BMap.Convertor.translate(gpsPoint, 0, callback); 
    //gpsPoint：转换前坐标，第二个参数为转换方法，0表示gps坐标转换成百度坐标，callback回调函数，参数为新坐标点

例子的详细代码如下：（引用中的ak是申请的key）

  1. <!DOCTYPE html>
  2. <html lang="zh-cn">
  3.     <head>
  4.         <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
  5.         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6.         <title></title>
  7.         <style type="text/css">
  8.             *{
  9.                 height: 100%;  //设置高度，不然会显示不出来
  10.             }
  11.         </style>
  12.  
  13.         <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
  14.         <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=··············"></script>
  15.         <script type="text/javascript" src="http://developer.baidu.com/map/jsdemo/demo/convertor.js"></script>
  16.         <script>
  17.             $(function(){
  18.                 navigator.geolocation.getCurrentPosition(translatePoint);   //定位
  19.             });
  20.             function translatePoint(position){
  21.                 var currentLat = position.coords.latitude;
  22.                 var currentLon = position.coords.longitude;
  23.                 var gpsPoint = new BMap.Point(currentLon, currentLat);
  24.                 BMap.Convertor.translate(gpsPoint, 0, initMap);    //转换坐标
  25.             }
  26.             function initMap(point){
  27.                 //初始化地图
  28.                 map = new BMap.Map("map");
  29.                 map.addControl(new BMap.NavigationControl());
  30.                 map.addControl(new BMap.ScaleControl());
  31.                 map.addControl(new BMap.OverviewMapControl());
  32.                 map.centerAndZoom(point, 15);
  33.                 map.addOverlay(new BMap.Marker(point))
  34.             }
  35.         </script>
  36.     </head>
  37.     <body>
  38.         <div id="map"></div>
  39.     </body>
  40. </html>

本人开发过程中觉得电脑的定位速度有点慢，经常无法获取坐标导致地图无法显示，建议用手机测试，定位较快。

当然了，如果仅是开发移动端的网页，就不需要使用jQuery，框架太大，可以换用其他轻量级的移动端的 js 框架。

html5定位并在百度地图上显示的更多相关文章

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

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

  2. 利用HTML5 Geolocation API在百度地图中显示你的位置

    代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <met ...

  3. 利用HTML5定位功能，实现在百度地图上定位（转）

    原文:利用HTML5定位功能,实现在百度地图上定位 代码如下: 测试浏览器:ie11定位成功率100%,Safari定位成功率97%,(add by zhj :在手机上测试(用微信内置浏览器打开),无 ...

  4. 百度地图API 显示区域边界及地名定位

    百度地图API 显示区域边界及地名定位 这个定位一共用了两个方法组成 一个是定位绘制区域边界线,另一个是地名定位 原理: 当用户输入省.市.县.区这种大地名时,我们要定位用户输入的这个位置,并显示轮廓 ...

  5. GPS坐标显示在百度地图上（Qt+百度地图）

    Qt在5.6以后的版本就不支持webview控件了,这里我用的是Qt5.4的版本,里面还有这个控件: 下面简单介绍下Qt与html中的javascript调用交互过程: 一.整体实现介绍 在html中 ...

  6. 百度地图API显示多个标注点带检索框

    通过百度地图的api,可以在地图上显示多个标注点,并给所有的标注点实现了带检索功能的信息框 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 T ...

  7. 百度地图API显示多个标注点并添加百度样式检索窗口

    原作者博客地址:http://blog.csdn.net/a497785609/article/details/24009031 在此基础上进行了修改: 1.添加闭包,将i传入内部 2.添加地图和卫星 ...

  8. 百度地图API显示多个标注点,解决提示信息问题以及给标注增加地图旁的文字连接提示的另一种解决办法

    原文:百度地图API显示多个标注点,解决提示信息问题以及给标注增加地图旁的文字连接提示的另一种解决办法 公司的网站改版要求在一个页面显示百度地图.上面要同时显示很多标注点,标注点当然要有提示信息嘛,提 ...

  9. 百度地图API显示多个标注点带百度样式信息检索窗口的代码

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. android Unable to instantiate application

    最近一段时间在做项目时候遇到一个错误老是解决不了,log如下: FATAL EXCEPTION: main12-11 09:08:53.922 E/AndroidRuntime( 1227): jav ...

  2. AssetsManager下载类

    cocos2dx-2.1.3 2dx自己代的例子进行讲解 360   cocos2dx net  --> 2.1.3AssetsManager AppDelegate.cpp详解 1.创建目录 ...

  3. Linux下的线程

    一.线程的优点 与传统进程相比,用线程来实现相同的功能有如下优点: (1)系统资源消耗低. (2)速度快. (3)线程间的数据共享比进程间容易的多. 二.多线程编程简单实例 #include < ...

  4. qregularexpression和qregexp的区别

    QRegularExpression 是Qt 5.0才引进的,相对于QRegExp,QRegularExpression class修复了很多bug,提高了效率,提供了对Perl的RegEx几乎全面兼 ...

  5. ubuntu13.04装配oracle11gR2

    http://jingyan.baidu.com/album/bea41d435bc695b4c41be648.html?picindex=2 http://www.360doc.com/conten ...

  6. 关于apache的重启

    一:Apache重起的最好方法apachectl graceful http://blog.csdn.net/qianling3439/article/details/8622618 二:请问apac ...

  7. Disruptor 源码阅读笔记--转

    原文地址:http://coderbee.net/index.php/open-source/20130812/400 一.Disruptor 是什么? Disruptor 是一个高性能异步处理框架, ...

  8. 文件共享windows server 2008 服务器

    1.远程连接到windows server2008 E盘右键共享 2.不能创建文件夹 右键E盘→共享→高级共享→权限→全部打勾即可. 3.ok,文件服务器

  9. main方法无法编译

    main方法无法编译,可能是没有括号的原因

  10. 小白日记47：kali渗透测试之Web渗透-XSS（一）

    XSS [推荐书籍:XSS跨站脚本攻击剖析与防御] xss表示Cross Site Scripting(跨站脚本攻击),它与SQL注入攻击类似,SQL注入攻击中以SQL语句作为用户输入,从而达到查询/ ...