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的::selection改变选中文本颜色的方法
Sep 29 HTML / CSS
CSS3实现曲线阴影和翘边阴影
May 03 HTML / CSS
css3旋转木马_动力节点Java学院整理
Jul 12 HTML / CSS
CSS3 input框的实现代码类似Google登录的动画效果
Aug 04 HTML / CSS
CSS3 实现飘动的云朵动画
Dec 01 HTML / CSS
html5中如何将图片的绝对路径转换成文件对象
Jan 11 HTML / CSS
基于HTML5 audio元素播放声音jQuery小插件
May 11 HTML / CSS
极简的HTML5模版
Jul 09 HTML / CSS
html5 视频播放解决方案
Nov 06 HTML / CSS
html5使用canvas压缩图片的示例代码
Sep 11 HTML / CSS
AmazeUI图片轮播效果的示例代码
Aug 20 HTML / CSS
Html5移动端网页端适配(js+rem)
Feb 03 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
PHP读取XML值的代码(推荐)
2011/01/01 PHP
PHP生成随机用户名和密码的实现代码
2013/02/27 PHP
有关于PHP中常见数据类型的汇总分享
2014/01/06 PHP
php resizeimage 部分jpg文件 生成缩略图失败的原因分析及解决办法
2016/03/23 PHP
PHP用swoole+websocket和redis实现web一对一聊天
2019/11/05 PHP
PHP实现简单的协程任务调度demo示例
2020/02/01 PHP
纯js实现背景图片切换效果代码
2010/11/14 Javascript
基于jquery tab切换(防止页面刷新)
2012/05/23 Javascript
写得不错的jquery table鼠标经过变色代码
2013/09/27 Javascript
JS+CSS实现精美的二级导航效果代码
2015/09/17 Javascript
javascript仿百度输入框提示自动下拉补全
2016/01/07 Javascript
简洁实用的BootStrap jQuery手风琴插件
2016/08/31 Javascript
小程序云开发之用户注册登录
2019/05/18 Javascript
vuex存储token示例
2019/11/11 Javascript
jQuery实现简单QQ聊天框
2020/08/27 jQuery
原生js实现下拉框选择组件
2021/01/20 Javascript
Python中replace方法实例分析
2014/08/20 Python
Python基础教程之利用期物处理并发
2018/03/29 Python
Python字符串匹配之6种方法的使用详解
2019/04/08 Python
Python中使用pypdf2合并、分割、加密pdf文件的代码详解
2019/05/21 Python
pandas 层次化索引的实现方法
2019/07/06 Python
python 定时器每天就执行一次的实现代码
2019/08/14 Python
Django Admin后台添加数据库视图过程解析
2020/04/01 Python
python文件读取失败怎么处理
2020/06/23 Python
Python 分布式缓存之Reids数据类型操作详解
2020/06/24 Python
Python 如何反方向迭代一个序列
2020/07/28 Python
Python页面加载的等待方式总结
2021/02/28 Python
英国最大的宠物食品和宠物用品网上零售商: Zooplus
2016/08/01 全球购物
自考生毕业自我鉴定
2013/10/10 职场文书
学生会主席竞聘书
2014/03/31 职场文书
2014年会策划方案
2014/05/11 职场文书
2014党委书记四风对照检查材料思想汇报
2014/09/21 职场文书
2015年度高中教师工作总结
2015/05/26 职场文书
2015上半年个人工作总结
2015/07/27 职场文书
煤矿安全生产工作总结
2015/08/13 职场文书
MySQL学习必备条件查询数据
2022/03/25 MySQL