在开发移动端 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. LOCK TABLES

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

  2. C#的System.ICloneable接口说明

    System.ICloneable接口支持克隆,即用与现有实例相同的值创建类的新实例.msdn上的解释很简单,主要就是clone方法的实行,介绍深拷贝和浅拷贝,搞的很糊涂,那么到底是什么意思呢?看看下 ...

  3. 基于jQuery的美食时间轴焦点图插件

    这是一款非常炫酷的jQuery焦点图插件,这款jQuery焦点图的特点是有一个时间轴,点击切换按钮时,时间轴会逐渐移动,时间轴上的图片也会逐渐切换.另外,在图片上方也可以放置自定义样式的文字. 在线预 ...

  4. 内核链表list.h

    stddef.h #define offsetof(TYPE, MEMBER) ((size_t) &((TYPE *)0)->MEMBER) list.h #ifndef _LINUX ...

  5. hadoop2 作业执行过程之作业提交

    hadoop2.2.0.centos6.5 hadoop任务的提交常用的两种,一种是测试常用的IDE远程提交,另一种就是生产上用的客户端命令行提交 通用的任务程序提交步骤为: 1.将程序打成jar包: ...

  6. C#基础--.net平台的重要组成部分以及.net程序简单的编译原理

    .net平台的组成只要有两部分   FCL:框架类库    CLR:公共语言运行时 .net程序简单的编译原理 1.0:使用C#编译器(csc.exe) 将C#源代码编译成程序集+{编译之前:会检查C ...

  7. Cyclic Nacklace

    Problem Description CC always becomes very depressed at the end of this month, he has checked his cr ...

  8. Sum of divisors

    Problem Description mmm is learning division, she's so proud of herself that she can figure out the ...

  9. C# 枚举绑定到ComboBox

    来自:http://blog.csdn.net/crazy_frog/article/details/7705442 方法一: 绑定 enum TestEnum {zero=0,one=1,two=2 ...

  10. android -- WatchDog看门狗分析

    在由单片机构成的微型计算机系统中,由于单片机的工作常常会受到来自外界电磁场的干扰,造成程序的跑飞,而陷入死循环,程序的正常运行被打断,由单片机控制的系统无法继续工作,会造成整个系统的陷入停滞状态,发生 ...