用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++之struct

    C++的struct对C做和很多补充,里面可以放函数(构造函数和虚函数),也可以同struct和class的继承,在C++中也完全可以替代class.他们之间的主要区别: 1 calss默认是私有继承 ...

  2. hdu2069（Coin Change）

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2069 Coin Change Time Limit: 1000/1000 MS (Java/Other ...

  3. Unity WWW下载图片并保存到Unity的Assets下

    1.新建一个UGUI的Image. 2.新建一个脚本wwwTest.cs: using System.Collections; using System.Collections.Generic; us ...

  4. python操作json文件

    import json class OperationJson(object): def __init__(self,file_name=None): if file_name: self.file_ ...

  5. (转)linux磁盘分区fdisk分区和parted分区

    linux磁盘分区fdisk分区和parted分区 原文:http://www.cnblogs.com/jiu0821/p/5503660.html ~~~~~~~~~~~~~~~~~~~~~~~~~ ...

  6. Hadoop实战：reduce端实现Join

    项目描述 现在假设有两个数据集:气象站数据库和天气记录数据库,并考虑如何合二为一.一个典型的查询是:输出气象站的历史信息,同时各行记录也包含气象站的元数据信息. 气象站和天气记录合并之后的示意图如下所 ...

  7. GridView相同内容合并单元格

    using System;using System.Data;using System.Configuration;using System.Collections;using System.Web; ...

  8. Java调用SQL Server的存储过程详解(转)

    1使用不带参数的存储过程 使用 JDBC 驱动程序调用不带参数的存储过程时,必须使用 call SQL 转义序列.不带参数的 call 转义序列的语法如下所示: 以下是引用片段:{call proce ...

  9. Ajax 使用 FormData做为data的参数时 出现Illegal invocation

    今天在用ajax向后台传递数据时出现此错误,在ajax的参数中加上 contentType: false, processData: false, 这两句即可.

  10. Consider everything deeply but still remain fearless.

    Consider everything deeply but still remain fearless.愿你能深思熟虑,但始终无所畏惧.