在开发移动端 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. cocos2d-html5的jsb模式下如何在编译时自动将js编译为jsc

    cocos2d-html5是一个用JS来开发游戏的框架,通过javascript Binding的方式可以将游戏编译到手机上.这对前端开发人员来说非常方便,开发效率也比使用c++开发要快的多. jsb ...

  2. 云服务器 ECS Linux 系统 CPU 占用率较高问题排查思路

    https://help.aliyun.com/knowledge_detail/41225.html?spm=5176.7841174.2.2.ifP9Sc 注意:本文相关配置及说明已在 CentO ...

  3. Jquery实现页面上所有的checkbox只能选中一个

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <hea ...

  4. 信号之sigprocmask函数

    一个进程的信号屏蔽字规定了当前阻塞而不能递送给该进程的信号集.调用函数sigprocmask可以检测或更改其信号屏蔽字,或者在一个步骤中同时执行这两个操作. #include <signal.h ...

  5. linux的Ubuntu

    一:修改ssh默认端口号 vi /etc/ssh/sshd_config [注意是sshd_config 而且是这个目录下,同时一定要用sudo才能修改,否则不能写入.所以sudo vi /etc/s ...

  6. LeetCode38 Count and Say

    The count-and-say sequence is the sequence of integers beginning as follows:1, 11, 21, 1211, 111221, ...

  7. Java最重要的21个技术点和知识点之JAVA基础

     (一)Java最重要的21个技术点和知识点之JAVA基础  写这篇文章的目的是想总结一下自己这么多年JAVA培训的一些心得体会,主要是和一些java基础知识点相关的,所以也希望能分享给刚刚入门的Ja ...

  8. C#三大支柱之继承

    1.使用base 若子类需要使用父类公开或受保护的成员则需要是base class Manager : Employee { public int StockOptions { get; set; } ...

  9. django 用imagefiled访问图片

    使用FileField和ImageField时,我们有几个步骤: 在settings.py中设置MEDIA_ROOT和MEDIA_URL MEDIA_ROOT:一个绝对路径,Django根据它知道文件 ...

  10. python用装饰器实现缓存函数执行结果

    根据调用的函数名和调用的参数,对函数的结果进行缓存,下次执行的时候就不用重复计算   可以用装饰器来实现   import time import hashlib import pickle cach ...