html5定位并在百度地图上显示的示例


Posted in HTML / CSS onApril 27, 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动画之利用requestAnimationFrame触发重新播放功能
Sep 11 HTML / CSS
使用CSS3实现多列布局与多背景的技巧
Feb 29 HTML / CSS
利用纯CSS3实现动态的自行车特效源码
Jan 20 HTML / CSS
CSS3颜色值RGBA与渐变色使用介绍
Mar 06 HTML / CSS
详解使用HTML5的classList属性操作CSS类
Oct 13 HTML / CSS
HTML5 Geolocation API的正确使用方法
Dec 04 HTML / CSS
HTML5标签大全
Nov 23 HTML / CSS
canvas仿写贝塞尔曲线的示例代码
Dec 29 HTML / CSS
前端实现打印图像功能
Aug 27 HTML / CSS
Html5 canvas画图白板踩坑
Jun 01 HTML / CSS
Html5新增了哪些功能
Apr 16 HTML / CSS
解决flex布局中子项目尺寸不受flex-shrink限制
May 11 HTML / CSS
HTML5中的autofocus(自动聚焦)属性介绍
Apr 23 #HTML / CSS
HTML5的download属性详细介绍和使用实例
Apr 23 #HTML / CSS
HTML5里的placeholder属性使用实例和美化显示效果的方法
Apr 23 #HTML / CSS
HTML5的hidden属性兼容老浏览器的方法
Apr 23 #HTML / CSS
HTML5中的Scoped属性使用实例
Apr 23 #HTML / CSS
HTML5添加鼠标悬浮音响效果不使用FLASH
Apr 23 #HTML / CSS
html5菜单折纸效果
Apr 22 #HTML / CSS
You might like
重置版宣传动画
2020/04/09 魔兽争霸
Destoon模板制作简明教程
2014/06/20 PHP
php实现的DateDiff和DateAdd时间函数代码分享
2014/08/16 PHP
php对文件夹进行相关操作(遍历、计算大小)
2015/11/04 PHP
PHP实现的简单排列组合算法应用示例
2017/06/20 PHP
一个简单的JavaScript 日期计算算法
2009/09/11 Javascript
javascript数字时钟示例分享
2014/04/23 Javascript
javascript实现避免页面按钮重复提交
2015/01/08 Javascript
使用JavaScript实现旋转的彩圈特效
2015/06/23 Javascript
基于javascript实现仿百度输入框自动匹配功能
2016/01/03 Javascript
Angular.js中$apply()和$digest()的深入理解
2016/10/13 Javascript
jQuery日程管理控件glDatePicker用法详解
2017/03/29 jQuery
利用Mongoose让JSON数据直接插入或更新到MongoDB
2017/05/03 Javascript
JS判断一个数是否是水仙花数
2017/06/11 Javascript
基于js原生和ajax的get和post方法以及jsonp的原生写法实例
2017/10/16 Javascript
jQuery实现浏览器之间跳转并传递参数功能【支持中文字符】
2018/03/28 jQuery
React中的render何时执行过程
2018/04/13 Javascript
vue项目中添加单元测试的方法
2018/07/21 Javascript
jQuery模拟12306城市选择框功能简单实现方法示例
2018/08/13 jQuery
vue 实现边输入边搜索功能的实例讲解
2018/09/16 Javascript
Vue封装全局过滤器Filters的步骤
2020/09/16 Javascript
[07:54]DOTA2-DPC中国联赛 正赛 iG vs VG 选手采访
2021/03/11 DOTA
Python Web框架Flask中使用七牛云存储实例
2015/02/08 Python
Python的装饰器使用详解
2017/06/26 Python
Python编程之基于概率论的分类方法:朴素贝叶斯
2017/11/11 Python
基于Python3.6+splinter实现自动抢火车票
2018/09/25 Python
Python获取基金网站网页内容、使用BeautifulSoup库分析html操作示例
2019/06/04 Python
Python实现FTP文件传输的实例
2019/07/07 Python
python基于property()函数定义属性
2020/01/22 Python
利用CSS3的flexbox实现水平垂直居中与三列等高布局
2016/09/12 HTML / CSS
员工培训协议书
2014/09/15 职场文书
大学生学年个人总结
2015/02/15 职场文书
医学生自荐信范文(2016精选篇)
2016/01/28 职场文书
工作简历的自我评价
2019/05/16 职场文书
Python基础之赋值,浅拷贝,深拷贝的区别
2021/04/30 Python
Redis官方可视化工具RedisInsight安装使用教程
2022/04/19 Redis