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 相关文章推荐
你应该知道的30个css选择器
Mar 19 HTML / CSS
CSS3绘制六边形的简单实现
Aug 25 HTML / CSS
用React加CSS3实现微信拆红包动画效果
Mar 13 HTML / CSS
如何用css3实现switch组件开关的方法
Feb 09 HTML / CSS
HTML5 本地存储之如果没有数据库究竟会怎样
Apr 25 HTML / CSS
canvas使用注意点总结
Jul 19 HTML / CSS
谷歌浏览器小字体处理方案即12px以下字体
Dec 17 HTML / CSS
HTML5新增的表单元素和属性实例解析
Jul 07 HTML / CSS
HTML5通用接口详解
Jun 12 HTML / CSS
Canvas环形饼图与手势控制的实现代码
Nov 08 HTML / CSS
Html5 Canvas实现图片标记、缩放、移动和保存历史状态功能 (附转换公式)
Mar 18 HTML / CSS
amazeui模态框弹出后立马消失并刷新页面
Aug 19 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
phpExcel中文帮助手册之常用功能指南
2014/08/18 PHP
PHP常用函数总结(180多个)
2016/12/25 PHP
php使用gearman进行任务分发操作实例详解
2020/02/26 PHP
JS正则表达式大全(整理详细且实用)
2013/11/14 Javascript
jquery进行数组遍历如何跳出当前的each循环
2014/06/05 Javascript
基于jQuery创建鼠标悬停效果的方法
2015/03/07 Javascript
Javascript页面跳转常见实现方式汇总
2015/11/28 Javascript
jQuery选择器用法实例详解
2015/12/17 Javascript
jquery自定义右键菜单、全选、不连续选择
2016/03/01 Javascript
JavaScript函数柯里化详解
2016/04/29 Javascript
如何防止INPUT按回车自动提交表单FORM
2016/12/06 Javascript
Bootstrap基本组件学习笔记之进度条(15)
2016/12/08 Javascript
详解nodejs 文本操作模块-fs模块(二)
2016/12/22 NodeJs
微信小程序动态的加载数据实例代码
2017/04/14 Javascript
Angular2使用Guard和Resolve进行验证和权限控制
2017/04/24 Javascript
vue的for循环使用方法
2019/02/12 Javascript
JavaScript实现消消乐的源代码
2021/01/12 Javascript
[14:56]教你分分钟做大人:巫医
2014/10/30 DOTA
Python自然语言处理之词干,词形与最大匹配算法代码详解
2017/11/16 Python
使用python获取csv文本的某行或某列数据的实例
2018/04/03 Python
django 使用 request 获取浏览器发送的参数示例代码
2018/06/11 Python
解决Django Haystack全文检索为空的问题
2020/05/19 Python
Python socket服务常用操作代码实例
2020/06/22 Python
便携式太阳能系统的创新者:GOAL ZERO
2018/02/04 全球购物
美国杰西潘尼官网:JCPenney
2019/06/12 全球购物
艺术专业大学生自我评价
2013/09/22 职场文书
12岁生日感言
2014/01/21 职场文书
王兆力在市委党的群众路线教育实践活动总结大会上的讲话稿
2014/10/25 职场文书
安全保证书
2015/01/16 职场文书
通用员工手册范本
2015/05/14 职场文书
少先队大队委竞选口号
2015/12/25 职场文书
关于感恩的素材句子(38句)
2019/11/11 职场文书
gojs实现蚂蚁线动画效果
2022/02/18 Javascript
Pandas实现DataFrame的简单运算、统计与排序
2022/03/31 Python
如何使用SQL Server语句创建表
2022/04/12 SQL Server
苹果可能正在打击不进行更新的 App
2022/04/24 数码科技