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 相关文章推荐
10个很棒的 CSS3 开发工具 推荐
May 16 HTML / CSS
带有css3动画效果的兼容多浏览器简单导航条示例
Jan 26 HTML / CSS
魔幻般冒泡背景的CSS3按钮动画
Feb 27 HTML / CSS
CSS3 仿微信聊天小气泡实例代码
Apr 05 HTML / CSS
html5指南-3.如何实现html元素拖拽功能
Jan 07 HTML / CSS
HTML5 Video/Audio播放本地文件示例介绍
Nov 18 HTML / CSS
html5桌面通知(Web Notifications)实例解析
Jul 07 HTML / CSS
使用Html5实现异步上传文件,支持跨域,带有上传进度条
Sep 17 HTML / CSS
基于 HTML5 WebGL 实现的医疗物流系统
Oct 08 HTML / CSS
详解HTML5常用的语义化标签
Sep 27 HTML / CSS
CSS 新特性 contain控制页面的重绘与重排问题
Apr 30 HTML / CSS
CSS子盒子水平和垂直居中的五种方法
Jul 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中将网址转换为超链接的函数
2011/09/02 PHP
PHP防CC攻击实现代码
2011/12/29 PHP
php输入流php://input使用示例(php发送图片流到服务器)
2013/12/25 PHP
Thinkphp自定义代码生成工具及用法说明(附下载地址)
2016/05/27 PHP
详谈PHP中public,private,protected,abstract等关键字的用法
2017/12/31 PHP
Laravel框架使用Redis的方法详解
2018/05/30 PHP
JavaScript setTimeout和setInterval的使用方法 说明
2010/03/25 Javascript
js 得到文件后缀(通过正则实现)
2013/07/08 Javascript
js脚本获取webform服务器控件的方法
2014/05/16 Javascript
JavaScript中的逻辑判断符&amp;&amp;、||与!介绍
2014/12/31 Javascript
JS实现从连接中获取youtube的key实例
2015/07/02 Javascript
14 个折磨人的 JavaScript 面试题
2016/08/08 Javascript
jQuery实现页面下拉100像素出现悬浮窗口的方法
2016/09/05 Javascript
基于jQuery的左滑出现删除按钮的示例
2017/08/29 jQuery
EasyUI实现下拉框多选功能
2017/11/07 Javascript
Vue 项目代理设置的优化
2018/04/17 Javascript
Angular resolve基础用法详解
2018/10/03 Javascript
详解Angular5/Angular6项目如何添加热更新(HMR)功能
2018/10/10 Javascript
vue2.0项目集成Cesium的实现方法
2019/07/30 Javascript
JS实现普通轮播图特效
2020/01/01 Javascript
[01:18]PWL开团时刻DAY4——圣剑与抢盾
2020/11/03 DOTA
Django 路由系统URLconf的使用
2018/10/11 Python
Django Channels 实现点对点实时聊天和消息推送功能
2019/07/17 Python
解决Jupyter notebook更换主题工具栏被隐藏及添加目录生成插件问题
2020/04/20 Python
python3字符串输出常见面试题总结
2020/12/01 Python
澳大利亚男士西服品牌:M.J.Bale
2018/02/06 全球购物
少先队入队活动方案
2014/02/08 职场文书
运动会入场词50字
2014/02/20 职场文书
婚前协议书
2014/04/15 职场文书
迁户口计划生育证明
2014/10/19 职场文书
公务员考察材料
2014/12/23 职场文书
销售员自我评价
2015/03/11 职场文书
三年级作文之小小梦想
2019/12/06 职场文书
python控制台打印log输出重复的解决方法
2021/05/14 Python
Python+Selenium自动化环境搭建与操作基础详解
2022/03/13 Python
Python 一键获取电脑浏览器的账号密码
2022/05/11 Python