用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. C#读取Oracle Spatial的sdo_geometry

    oracle的sdo_geometry中内置get_wkt和get_wkb两个方法. 以数据库表geoms为例,此表中有id和geometry两列 try { OracleConnection con ...

  2. git commit之后撤销

    先git log 查看日志,找到需要回退的那次commit的哈希值 然后git reset --soft commit_id ok

  3. Murano package

    Murano have 2 package types: HOT package with Heat template inside and MuranoPL package with MuranoP ...

  4. js、jquery报错

    js.jquery一直报错,是myecplise的问题, 右键项目->属性->builder->js validate去掉单个文件出错 右击文件->myecplise-> ...

  5. pat1097. Deduplication on a Linked List (25)

    1097. Deduplication on a Linked List (25) 时间限制 300 ms 内存限制 65536 kB 代码长度限制 16000 B 判题程序 Standard 作者 ...

  6. SpringMVC 返回实体对象时屏蔽某些属性

    SpringMVC 可以直接已JSON的结果返回实体对象,可是返回时是所有属性与属性值都会一并返回, 怎样才能屏蔽某些属性?方法很简单,只要在实体对象类中要屏蔽的属性值上加 @JsonIgnore 注 ...

  7. JAVA中日期格式转换各个字母代表含义

    G  Era 标志符  Text  AD  y  年  Year  1996; 96  M  年中的月份  Month  July; Jul; 07  w  年中的周数  Number  27  W  ...

  8. JAXB介绍二

    链接上一遍 JAXB介绍一 , 本节主要介绍解析xml的步骤, 下面的例子是在实际项目中运用的, 把它拿出来单独写一个java运行程序. 5. 测试实例 先给出我的代码结构图: 再给出要解析的Scri ...

  9. 通过 java的 esl 连接 freeswitch

    一.目标修改event_socket配置,使之能够建立远端ESL链接. 二.步骤 1. vim ../autoload_configs/event_socket.conf.xml 2. 默认的监听地址 ...

  10. 本人常用的Phpstorm快捷键

    我设置的是eclipse的按键风格(按键习惯),不是phpstorm的风格 1.添加TODO(这个不是快捷键)://TODO 后面是说明,换行写实现代码 2.选择相同单词做一次性修改:Alt+J+鼠标 ...