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绘制出各种几何图形
Aug 17 HTML / CSS
实列教程 一款基于jquery和css3的响应式二级导航菜单
Nov 13 HTML / CSS
CSS Grid布局教程之网格单元格布局
Dec 30 HTML / CSS
CSS3实现淘宝留白的方法
Jun 05 HTML / CSS
css3实现二维码扫描特效的示例
Oct 29 HTML / CSS
Html5 实现微信分享及自定义内容的流程
Aug 20 HTML / CSS
HTML5 创建canvas元素示例代码
Jun 04 HTML / CSS
Html5新特性用canvas标签画多条直线附效果截图
Jun 30 HTML / CSS
关于HTML5语义标签的实践(blog页面)
Jul 12 HTML / CSS
canvas压缩图片以及卡片制作的方法示例
Dec 04 HTML / CSS
使用HTML5加载音频和视频的实现代码
Nov 30 HTML / CSS
分享CSS盒子模型隐藏的几种方式
Feb 28 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
PHP4 与 MySQL 数据库操作函数详解
2006/10/09 PHP
在WordPress中实现发送http请求的相关函数解析
2015/12/29 PHP
php通过会话控制实现身份验证实例
2016/10/18 PHP
Add Formatted Data to a Spreadsheet
2007/06/12 Javascript
基于jquery的3d效果实现代码
2011/03/23 Javascript
《JavaScript高级程序设计》阅读笔记(二) ECMAScript中的原始类型
2012/02/27 Javascript
JS判断表单输入是否为空(示例代码)
2013/12/23 Javascript
javascript实现简单的html5视频播放器
2015/05/06 Javascript
老生常谈Bootstrap媒体对象
2017/07/06 Javascript
JavaScript JMap类定义与使用方法示例
2019/01/22 Javascript
vue项目首屏打开速度慢的解决方法
2019/03/31 Javascript
详解iview的checkbox多选框全选时校验问题
2019/06/10 Javascript
node删除、复制文件或文件夹示例代码
2019/08/13 Javascript
基于JavaScript实现表格隔行换色
2020/05/08 Javascript
解决Python传递中文参数的问题
2015/08/04 Python
浅谈Python中重载isinstance继承关系的问题
2018/05/04 Python
Tensorflow卷积神经网络实例进阶
2018/05/24 Python
对Python中class和instance以及self的用法详解
2019/06/26 Python
Python3 全自动更新已安装的模块实现
2020/01/06 Python
TensorFlow tf.nn.conv2d_transpose是怎样实现反卷积的
2020/04/20 Python
Pycharm中安装wordcloud等库失败问题及终端通过pip安装的Python库如何添加到Pycharm解释器中(推荐)
2020/05/10 Python
Python3利用scapy局域网实现自动多线程arp扫描功能
2021/01/21 Python
HTML5组件Canvas实现图像灰度化(步骤+实例效果)
2013/04/22 HTML / CSS
英国家居用品和家居装饰品购物网站:Cox & Cox
2019/08/25 全球购物
建筑系毕业生自我鉴定
2014/01/24 职场文书
学生自我评价范文
2014/02/02 职场文书
高中校园广播稿3篇
2014/09/29 职场文书
湘江北去观后感
2015/06/15 职场文书
社区志愿服务活动感想
2015/08/07 职场文书
《倍数和因数》教学反思
2016/02/23 职场文书
青年岗位能手事迹材料(2016推荐版)
2016/03/01 职场文书
销售会议开幕词
2016/03/04 职场文书
Python Pytorch查询图像的特征从集合或数据库中查找图像
2022/04/09 Python
Vue2项目中对百度地图的封装使用详解
2022/06/16 Vue.js
CSS的calc函数用法小结
2022/06/25 HTML / CSS
Vue深入理解插槽slot的使用
2022/08/05 Vue.js