html5定位获取当前位置并在百度地图上显示


Posted in HTML / CSS onAugust 22, 2014

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

HTML / CSS 相关文章推荐
带有css3动画效果的兼容多浏览器简单导航条示例
Jan 26 HTML / CSS
CSS3实现的炫酷菜单代码分享
Mar 12 HTML / CSS
CSS3 函数技巧 用css 实现js实现的事情(clac Counters Tooltip)
Aug 15 HTML / CSS
基于CSS3的animation属性实现微信拍一拍动画效果
Jun 22 HTML / CSS
基于HTML5 Canvas 实现弹出框效果
Jun 05 HTML / CSS
html5+svg学习指南之SVG基础知识
Dec 17 HTML / CSS
HTML5 canvas实现移动端上传头像拖拽裁剪效果
Mar 14 HTML / CSS
原生 JS+CSS+HTML 实现时序图的方法
Jul 31 HTML / CSS
浅析HTML5页面元素及属性
Jan 20 HTML / CSS
面试必问:圣杯布局和双飞翼布局的区别
May 13 HTML / CSS
如何在CSS中绘制曲线图形及展示动画
May 24 HTML / CSS
使用CSS实现黑白格背景效果
Jun 01 HTML / CSS
HTML5 transform三维立方体实现360无死角三维旋转效果
Aug 22 #HTML / CSS
html5 更新图片颜色示例代码
Jul 29 #HTML / CSS
Html5 语法与规则简要概述
Jul 29 #HTML / CSS
html5桌面通知(Web Notifications)实例解析
Jul 07 #HTML / CSS
HTML5实现WebSocket协议原理浅析
Jul 07 #HTML / CSS
HTML5新增的表单元素和属性实例解析
Jul 07 #HTML / CSS
HTML5+CSS3实现拖放(Drag and Drop)示例
Jul 07 #HTML / CSS
You might like
php Sql Server连接失败问题及解决办法
2009/08/07 PHP
提高PHP编程效率的53个要点(经验小结)
2010/09/04 PHP
浅析PHP中的字符串编码转换(自动识别原编码)
2013/07/02 PHP
PHP闭包实例解析
2014/09/08 PHP
PHP 数组基本操作小结(推荐)
2016/06/13 PHP
php mysql实现mysql_select_db选择数据库
2016/12/30 PHP
转自Jquery官方 jQuery1.1.3发布,速度提升800%,体积保持20K
2007/08/19 Javascript
jquery捕捉回车键及获取checkbox值与异步请求的方法
2015/12/24 Javascript
详解AngularJS 模块化
2017/06/14 Javascript
禁止弹窗中蒙层底部页面跟随滚动的几种方法
2017/12/07 Javascript
微信小程序停止其他视频播放当前视频的实例代码
2019/12/25 Javascript
《javascript设计模式》学习笔记四:Javascript面向对象程序设计链式调用实例分析
2020/04/07 Javascript
Vuex的热更替如何实现
2020/06/05 Javascript
vue实现放大镜效果
2020/09/17 Javascript
原生JavaScript实现留言板
2021/01/10 Javascript
python计算auc指标实例
2017/07/13 Python
Python+Pandas 获取数据库并加入DataFrame的实例
2018/07/25 Python
Python饼状图的绘制实例
2019/01/15 Python
Python生成器的使用方法和示例代码
2019/03/04 Python
详解pandas的外部数据导入与常用方法
2019/05/01 Python
Python代码太长换行的实现
2019/07/05 Python
Python使用微信itchat接口实现查看自己微信的信息功能详解
2019/08/22 Python
python利用opencv实现SIFT特征提取与匹配
2020/03/05 Python
Python使用Numpy模块读取文件并绘制图片
2020/05/13 Python
Python爬虫之Selenium警告框(弹窗)处理
2020/12/04 Python
移动HTML5前端框架—MUI的使用
2017/12/18 HTML / CSS
html5移动端价格输入键盘的实现
2019/09/16 HTML / CSS
毕业自我鉴定怎么写
2014/03/25 职场文书
减负增效提质方案
2014/05/23 职场文书
国际会计专业求职信
2014/08/04 职场文书
中秋节国旗下演讲稿
2014/09/05 职场文书
六查六看自查报告
2014/10/14 职场文书
一般基层干部群众路线教育实践活动个人对照检查材料
2014/11/04 职场文书
装饰技术负责人岗位职责
2015/04/13 职场文书
有关水浒传的读书笔记
2015/06/25 职场文书
PHP实现考试倒计时功能代码
2021/04/16 PHP