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 相关文章推荐
详解background属性的8个属性值(面试题)
Nov 02 HTML / CSS
在html5的Canvas上绘制椭圆的几种方法总结
Jan 07 HTML / CSS
HTML5 Canvas自定义圆角矩形与虚线示例代码
Aug 02 HTML / CSS
利用HTML5的新特点实现图片文件异步上传
May 29 HTML / CSS
HTML5标签大全
Nov 23 HTML / CSS
HTML5中indexedDB 数据库的使用实例
May 11 HTML / CSS
canvas简易绘图的实现(海绵宝宝篇)
Jul 04 HTML / CSS
移动端开发HTML5页面点击按钮后出现闪烁或黑色背景的解决办法
Sep 19 HTML / CSS
html5视频自动横过来自适应页面且点击播放功能的实现
Jun 03 HTML / CSS
amazeui页面分析之登录页面的示例代码
Aug 25 HTML / CSS
html实现弹窗的实例
Jun 09 HTML / CSS
CSS 使用 resize 实现图片拖拽切换预览功能(强大功能)
Aug 23 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面向对象全攻略 (十) final static const关键字的使用
2009/09/30 PHP
php实现的简易扫雷游戏实例
2015/07/09 PHP
Ext JS Grid在IE6 下宽度的问题解决方法
2009/02/15 Javascript
js Function类型
2011/12/04 Javascript
JavaScript中变量提升 Hoisting
2012/07/03 Javascript
Jquery选中或取消radio示例
2013/09/29 Javascript
js通过八个点 拖动改变div大小的实现方法
2014/03/05 Javascript
JSP中使用JavaScript动态插入删除输入框实现代码
2014/06/13 Javascript
JS更改select内option属性的方法
2015/10/14 Javascript
chrome调试javascript详解
2015/10/21 Javascript
纯JS实现简单的日历
2017/06/26 Javascript
详解node-ccap模块生成captcha验证码
2017/07/01 Javascript
jQuery实现的两种简单弹窗效果示例
2018/04/18 jQuery
利用JS代码自动删除稿件的普通弹幕功能
2019/09/20 Javascript
VUE兄弟组件传值操作实例分析
2019/10/26 Javascript
python实现向ppt文件里插入新幻灯片页面的方法
2015/04/28 Python
python常见数制转换实例分析
2015/05/09 Python
利用python如何处理百万条数据(适用java新手)
2018/06/06 Python
python实现输入数字的连续加减方法
2018/06/22 Python
python定向爬虫校园论坛帖子信息
2018/07/23 Python
解决pycharm运行出错,代码正确结果不显示的问题
2018/11/30 Python
Python socket 套接字实现通信详解
2019/08/27 Python
python tkinter图形界面代码统计工具(更新)
2019/09/18 Python
Python3 中sorted() 函数的用法
2020/03/24 Python
如何用Python徒手写线性回归
2021/01/25 Python
美国环保婴儿用品公司:The Honest Company
2017/11/23 全球购物
软件测试工程师面试问题精选
2016/10/28 面试题
大学毕业生的自我鉴定
2013/11/30 职场文书
任命书模板
2014/06/04 职场文书
门市房租房协议书
2014/12/04 职场文书
美术教师个人总结
2015/02/06 职场文书
2015年班主任个人工作总结
2015/03/31 职场文书
社区环境卫生倡议书
2015/04/29 职场文书
Nginx反向代理及负载均衡如何实现(基于linux)
2021/03/31 Servers
react中的DOM操作实现
2021/06/30 Javascript
MySQL慢查询优化解决问题
2022/03/17 MySQL