在开发移动端 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. iOS开发——开发必备OC篇&UITableView设置界面完整封装（四）

    设置界面完整封装(四) 简单MVC实现UITableView设置界面完善封装及拓展使用 关于使用和拓展, 其实基本上就是同UItableView,知识讲数据改一下就可以 拓展使用 1:首先定义一个数组 ...

  2. 剑指 offer set 7 调整数组顺序使奇数位于偶数前面

    总结 1. 之前不确定这种题的最终解法, 现在明确了, 就是一次快排

  3. 剑指 offer set 3 旋转数组的最小数字

    总结 1. 没有重复元素的旋转数组可用 logn 时间内求出结果. 解法有两个步骤, 先是求出发生旋转的点(以 array[0] 为支点求得), 然后用正常的二分查找给出结果 2. 有重复元素元素的旋 ...

  4. 文件写入文件分布式系统(asp.net C#)

    ) { try { System.Drawing.Image img = System.Drawing.Image.FromStream(fileData.InputStream); &&am ...

  5. linux 内核参数图解

    https://www.suse.com/documentation/sles11/book_sle_tuning/data/part_tuning_kernel.html http://blog.c ...

  6. socket通信简介

    转:http://blog.csdn.net/xiaoweige207/article/details/6211577 “一切皆Socket!” 话虽些许夸张,但是事实也是,现在的网络编程几乎都是用的 ...

  7. C. Anya and Smartphone

    C. Anya and Smartphone time limit per test 1 second memory limit per test 256 megabytes input standa ...

  8. C. Mobile phones

    Suppose that the fourth generation mobile phone base stations in the Tampere area operate as follows ...

  9. [PHP] htaccess 探秘

    .htaccess访问控制(Allow/Deny) 1. 验证是否支持.htaccess 在目录下新建一个.htaccess 文件,随笔输入一串字符(毫无意义),看看什么反应,如果是500错误,说明目 ...

  10. java 动态代理范例 InvocationHandler与Proxy

    java 动态代理范例 InvocationHandler与Proxy,拦截与代理 java.lang.reflect.Proxy,Proxy 提供用于创建动态代理类和实例的静态方法.newProxy ...