用html5的地理定位功能通过手机定位获取当前位置并在地图上居中显示出来，下面是百度地图API的使用过程，有需要的朋友可以参考下

在开发移动端 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 框架。

 

注意：移动端前端开发调试 http://yujiangshui.com/multidevice-frontend-debug/

 文本大多为摘录或总结，如影响到原创利益问题，请联系我删除!

html5定位获取当前位置并在百度地图上显示的更多相关文章

  1. html5定位并在百度地图上显示

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

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

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

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

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

  4. Android教程：在百度地图上画出轨迹

    [日期:2013-04-14] 来源:Linux社区  作者:crazyxin1988 [字体:大 中 小]     接着上面的项目<Android访问webservice.客户端登录注册> ...

  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. HDU 5908 Abelian Period 可以直接用multiset

    http://acm.hdu.edu.cn/showproblem.php?pid=5908 要求把数组分成k组使得每组中的元素出现次数相同 就是分成k个集合,那么直接用multiset判定就可以 有 ...

  2. D - 稳住GCD DP

    http://acm.uestc.edu.cn/#/problem/show/923 给定一堆数字,求其所有数字的gcd. 现在要删除最多的数字,使得剩下的数字的gcd和原来的一样. 设dp[i][v ...

  3. Python3.5 控制台日志输出，区分标准输出与错误输出

    import logging import sys class ConsoleHandler(logging.Handler): terminator = '\n' def __init__(self ...

  4. android 开发-Process and Thread

    目录 1 android中进程与线程 - Processes and Threads 1.1 进程 - Processes 1.1.1 进程的生命期 1.2 线程 - Threads 1.2.1 工作 ...

  5. java实现发送邮件工具

    java实现发送邮件的功能:首先需要导入mail.jar: 然后需要写发送方法: 1.邮箱发送封装工具类: package com.wxjiameng.utils; import java.util. ...

  6. centos yum 安装mysql5.7 以及 默认root密码查看

    1.  首先更新rpm 从MySQL Yum仓库下载最新的rpm文件:http://dev.mysql.com/downloads/repo/yum/ (需要Oracle帐号以及填写一些使用信息,才能 ...

  7. 使用visio创建数据库模型

    使用软件:visio 2007 下载地址:https://pan.baidu.com/s/1i4LG1Id 主要参考:http://blog.csdn.net/zhang_xinxiu/article ...

  8. CAS登录认证的简单介绍

    参考博客:  https://www.jianshu.com/p/8daeb20abb84 下面是CAS最基本的协议过程: 下面是CAS Web工作流程图: 名词解释 Ticket Grangting ...

  9. 工作中碰到的css问题解决方法

    好久都没来这写东西了,都长草了.刚解决的两个小问题,先记下来 textarea横向没有滚动条加上 wrap="off"这个属性 英文单词不断行加上这个 word-break:bre ...

  10. pat乙级1052

    输出“\”字符: cout << "\\"; 因为‘\’是转义字符,例如“\n”代表换行. 同理,printf输出“%”: printf("%%") ...