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弹性盒模型开发笔记(一)
Apr 26 HTML / CSS
详解CSS3 用border写 空心三角箭头 (两种写法)
Sep 29 HTML / CSS
CSS3截取字符串实例代码【推荐】
Jun 07 HTML / CSS
浅谈css3中的前缀
Jul 20 HTML / CSS
基于Html5实现的react拖拽排序组件示例
Aug 13 HTML / CSS
用HTML5实现手机摇一摇的功能的教程
Oct 30 HTML / CSS
让IE下支持Html5的placeholder属性的插件
Sep 02 HTML / CSS
html5手机端页面可以向右滑动导致样式受影响的问题
Jun 20 HTML / CSS
canvas像素点操作之视频绿幕抠图
Sep 11 HTML / CSS
HTML5 FileReader对象的具体使用方法
May 22 HTML / CSS
CSS实现fullpage.js全屏滚动效果的示例代码
Mar 24 HTML / CSS
table设置超出部分隐藏,鼠标移上去显示全部内容的方法
Dec 24 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和MySql来与ODBC数据连接
2006/10/09 PHP
IIS6.0+PHP5.x+MySQL5.x+Zend3.0x+GD+phpMyAdmin2.8x通用安装实例(已经完成)
2006/12/06 PHP
探讨:如何使用PHP实现计算两个日期间隔的年、月、周、日数
2013/06/13 PHP
php 判断是否是中文/英文/数字示例代码
2013/09/30 PHP
将php数组输出html表格的方法
2014/02/24 PHP
php操作xml入门之cdata区段
2015/01/23 PHP
使用ucenter实现多站点同步登录的讲解
2019/03/21 PHP
Laravel修改验证提示信息为中文的示例
2019/10/23 PHP
Extjs NumberField后面加单位实现思路
2013/07/30 Javascript
生成二维码方法汇总
2014/12/26 Javascript
JQuery中attr方法和removeAttr方法用法实例
2015/05/18 Javascript
深入理解JavaScript的React框架的原理
2015/07/02 Javascript
纯javascript判断查询日期是否为有效日期
2015/08/24 Javascript
javascript实现二级级联菜单的简单制作
2015/11/19 Javascript
js实现tab切换效果
2017/02/16 Javascript
Vue原理剖析 实现双向绑定MVVM
2017/05/03 Javascript
基于EasyUI的基础之上实现树形功能菜单
2017/06/28 Javascript
Vue中引入样式文件的方法
2017/08/18 Javascript
vue select选择框数据变化监听方法
2018/08/24 Javascript
webpack file-loader和url-loader的区别
2019/01/15 Javascript
swiperjs实现导航与tab页的联动
2020/12/13 Javascript
Vue项目打包部署到apache服务器的方法步骤
2021/02/01 Vue.js
[05:08]顺网杯ISS-DOTA2赛歌 少女偶像Lunar青春演绎
2013/12/05 DOTA
python实现超简单端口转发的方法
2015/03/13 Python
Python实现读取并保存文件的类
2017/05/11 Python
windows下python连接oracle数据库
2017/06/07 Python
python merge、concat合并数据集的实例讲解
2018/04/12 Python
总结python中pass的作用
2019/02/27 Python
Python制作运行进度条的实现效果(代码运行不无聊)
2021/02/24 Python
解决canvas转base64/jpeg时透明区域变成黑色背景的方法
2016/10/23 HTML / CSS
英国可持续奢侈品包包品牌:Elvis & Kresse
2018/08/05 全球购物
运动鞋、街头服装、手表和手袋的实时市场:StockX
2020/11/25 全球购物
计算机专业学生求职信分享
2013/12/15 职场文书
2014年大班元旦活动方案
2014/02/26 职场文书
国际贸易专业自荐信
2014/06/10 职场文书
违章停车检讨书
2014/10/21 职场文书