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 相关文章推荐
25个CSS3动画按钮和菜单教程分享
Oct 03 HTML / CSS
浅谈HTML5新增及移除的元素
Jun 27 HTML / CSS
html5 canvas绘制放射性渐变色效果
Jan 04 HTML / CSS
Html5实现单张、多张图片上传功能
Apr 28 HTML / CSS
HTML5 b和i标记将被赋予真正的语义
Jul 16 HTML / CSS
HTML4和HTML5之间除了相似以外的10个主要不同
Dec 13 HTML / CSS
html5图片上传预览示例分享
Apr 14 HTML / CSS
HTML5中的强制下载属性download使用实例解析
May 12 HTML / CSS
Html5页面中的返回实现的方法
Feb 26 HTML / CSS
html2 canvas生成清晰的图片实现打印功能
Sep 23 HTML / CSS
HTML table 表格边框的实现思路
Oct 12 HTML / CSS
CSS实现九宫格布局(自适应)的示例代码
Feb 12 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内存溢出问题的解决方法
2013/06/25 PHP
php不写闭合标签的好处
2014/03/04 PHP
php获得文件夹下所有文件的递归算法的简单实例
2016/11/01 PHP
PHP  Yii清理缓存的实现方法
2016/11/10 PHP
IE浏览器兼容Firefox的JS脚本的代码
2008/10/23 Javascript
一组JS创建和操作表格的函数集合
2009/05/07 Javascript
Javascript中找到子元素在父元素内相对位置的代码
2012/07/21 Javascript
javascript:文字不间断向左移动的实例代码
2013/08/08 Javascript
js全选实现和判断是否有复选框选中的方法
2015/02/17 Javascript
JavaScript判断按钮被点击的方法
2015/12/13 Javascript
一些实用性较高的js方法
2016/04/19 Javascript
数据结构中的各种排序方法小结(JS实现)
2016/07/23 Javascript
Vue开发中整合axios的文件整理
2017/04/29 Javascript
JavaScript实现body内任意节点的自定义属性功能示例
2017/09/18 Javascript
JS删除数组里的某个元素方法
2018/02/03 Javascript
Express进阶之log4js实用入门指南
2018/02/10 Javascript
总结js函数相关知识点
2018/02/27 Javascript
JavaScript引用类型RegExp基本用法详解
2018/08/09 Javascript
详解Ant Design of React的安装和使用方法
2018/12/27 Javascript
基于Django模板中的数字自增(详解)
2017/09/05 Python
django 通过ajax完成邮箱用户注册、激活账号的方法
2018/04/17 Python
python中redis查看剩余过期时间及用正则通配符批量删除key的方法
2018/07/30 Python
在Python中如何传递任意数量的实参的示例代码
2019/03/21 Python
Django获取该数据的上一条和下一条方法
2019/08/12 Python
Python之数据序列化(json、pickle、shelve)详解
2019/08/30 Python
纯CSS3实现Material Design效果
2017/03/09 HTML / CSS
我的求职计划书
2014/01/10 职场文书
运动会口号大全
2014/06/07 职场文书
我的梦想演讲稿500字
2014/08/21 职场文书
教师先进事迹材料
2014/12/16 职场文书
2015年节能减排工作总结
2015/05/14 职场文书
工程移交协议书
2016/03/24 职场文书
django如何自定义manage.py管理命令
2021/04/27 Python
SpringBoot集成Redis,并自定义对象序列化操作
2021/06/22 Java/Android
Win11运行育碧游戏总是崩溃怎么办 win11玩育碧游戏出现性能崩溃的解决办法
2022/04/06 数码科技
解决MySQL Varchar 类型尾部空格的问题
2022/04/06 MySQL