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

navigator.geolocation.getCurrentPosition(callback);

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

var map = new BMap.Map("mapDiv");//mapDiv为放地图的 div 的 id

map.addControl(new BMap.NavigationControl());

map.addControl(new BMap.ScaleControl());

map.addControl(new BMap.OverviewMapControl());

map.centerAndZoom(point, 15);//point为坐标点，15为地图缩放级别，最大级别是 18

var pointMarker = new BMap.Marker(point);

map.addOverlay(pointMarker);

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

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

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

<!DOCTYPE html>

<html lang="zh-cn">

    <head>

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

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

        <title></title>

        <style type="text/css">

            *{

                height: 100%;  //设置高度，不然会显示不出来

            }

        </style>

        <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>

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

        <script type="text/javascript" src="http://developer.baidu.com/map/jsdemo/demo/convertor.js"></script>

        <script>

            $(function(){

                navigator.geolocation.getCurrentPosition(translatePoint);   //定位

            });

            function translatePoint(position){

                var currentLat = position.coords.latitude;

                var currentLon = position.coords.longitude;

                var gpsPoint = new BMap.Point(currentLon, currentLat);

                BMap.Convertor.translate(gpsPoint, 0, initMap);    //转换坐标

            }

            function initMap(point){

                //初始化地图

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

                map.addControl(new BMap.NavigationControl());

                map.addControl(new BMap.ScaleControl());

                map.addControl(new BMap.OverviewMapControl());

                map.centerAndZoom(point, 15);

                map.addOverlay(new BMap.Marker(point))

            }

        </script>

    </head>

    <body>

        <div id="map"></div>

    </body>

</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. Xcode常见的编译、运行等错误的解决

    Xcode常见的编译.运行等错误的解决 项目没找到Info.plist的错误 The solution for this particular instance of the error was “I ...

  2. LOCK TABLES

    http://blog.csdn.net/zyz511919766/article/details/16342003 http://blog.csdn.net/zyz511919766/article ...

  3. 何查看Tomcat版本信息

    转自:http://dengjianqiang200.blog.163.com/blog/static/65811920094644354148/ 一般来说,在tomcat启动时就会有版本信息,如: ...

  4. java中十进制转二进制转换函数

    十进制转成十六进制: Integer.toHexString(int i) 十进制转成八进制 Integer.toOctalString(int i) 十进制转成二进制 Integer.toBinar ...

  5. Busybox支持中文的解决办法

    转载:http://blog.csdn.net/wavemcu/article/details/7202908 ******************************************** ...

  6. Debian的定时执行命令Crontab

    转载:http://i.592.net/?post=276 Debian的定时执行命令Crontab,这个相当于Windows的计划任务 想要让Debian定时执行命令就得靠crontab了!     ...

  7. EF——继承映射关系TPH、TPT和TPC的讲解以及一些具体的例子 05 （转）

    EF里的继承映射关系TPH.TPT和TPC的讲解以及一些具体的例子   本章节讲解EF里的继承映射关系,分为TPH.TPT.TPC.具体: 1.TPH:Table Per Hierarchy 这是EF ...

  8. ios-UIPickerView基本使用

    #import "ViewController.h" @interface ViewController ()<UIPickerViewDataSource,UIPicker ...

  9. extjs中grid对于其中表单的表头的读取以及是否隐藏的判断

    //获取grid的表头信息 var columns=baseGrid.columns;                     alert(columns.length); //判断列是否隐藏并输出表 ...

  10. Java实现深克隆的两种方式

    序列化和依次克隆各个可变的引用类型都可以实现深克隆,但是序列化的效率并不理想 下面是两种实现深克隆的实例,并且测试类对两种方法进行了对比: 1.重写clone方法使用父类中的clone()方法实现深克 ...