html5:地理信息 LBS基于地理的服务和百度地图API的使用
地理位置请求
单次定位请求getCurrentPosition(请求成功函数，请求失败函数，数据收集方式)
多次定位请求watchPosition(请求成功函数，请求失败函数，数据收集方式)
关闭更新请求clearWatch ，类似js中的定时器
navigator.geolocation
单次定位请求 ：getCurrentPosition(请求成功，请求失败，数据收集方式)
请求成功函数function(position)
经度 : position.coords.longitude
纬度 : position.coords.latitude
准确度 : position.coords.accuracy
海拔 : position.coords.altitude
海拔准确度 : position.coords.altitudeAcuracy
行进方向 : position.coords.heading
地面速度 : position.coords.speed
时间戳 : new Date(position.timestamp)
请求失败函数function(err)
失败编号 ：code
0 : 不包括其他错误编号中的错误
1 : 用户拒绝浏览器获取位置信息
2 : 尝试获取用户信息，但失败了
3 : 设置了timeout值，获取位置超时了
数据收集 : json的形式
enableHighAcuracy : 更精确的查找，默认false
timeout : 获取位置允许最长时间，默认infinity
maximumAge : 位置可以缓存的最大时间，默认0
多次定位请求 : watchPosition(像setInterval)
移动设备有用，位置改变才会触发
配置参数：frequency 更新的频率
关闭更新请求 : clearWatch(像clearInterval)
demo
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>
//LBS : 基于地图信息的应用
window.onload = function(){
var oInput = document.getElementById('input1');
var oT = document.getElementById('t1');
var timer = null;
oInput.onclick = function(){
//一般移动端，手机位置换动。//换成单次试一试getCurrentPosition
timer = navigator.geolocation.watchPosition(function(position){
oT.value += '经度:' + position.coords.longitude+'\n';
oT.value += '纬度 :' + position.coords.latitude+'\n';
oT.value += '准确度 :' + position.coords.accuracy+'\n';
oT.value += '海拔 :' + position.coords.altitude+'\n';
oT.value += '海拔准确度 :' + position.coords.altitudeAcuracy+'\n';
oT.value += '行进方向 :' + position.coords.heading+'\n';
oT.value += '地面速度 :' + position.coords.speed+'\n';
oT.value += '时间戳:' + new Date(position.timestamp)+'\n';
},function(err){
//err.code // 失败所对应的编号
alert( err.code );
navigator.geolocation.clearWatch(timer);
},{
enableHighAcuracy : true,
timeout : 5000,
maximumAge : 5000,
frequency : 1000
});
};
};
</script>
</head>
<body>
<input type="button" value="请求" id="input1" /><br />
<textarea id="t1" style="width:400px; height:400px; border:1px #000 solid;">
</textarea>
</body>
</html>
结果
百度地图API的使用
地址
http://lbsyun.baidu.com/,http://lbsyun.baidu.com/index.php?title=jspopular找实例
百度地图apidemo
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
#div1{ width:400px; height:400px; border:1px #000 solid;}
</style>
<script src="http://api.map.baidu.com/api?v=1.3"></script>
<script>
window.onload = function(){
var oInput = document.getElementById('input1');
oInput.onclick = function(){
navigator.geolocation.getCurrentPosition(function(position){
var y = position.coords.longitude;
var x = position.coords.latitude;
var map = new BMap.Map("div1");
var pt = new BMap.Point(y, x);
map.centerAndZoom(pt, 14);
map.enableScrollWheelZoom();
var myIcon = new BMap.Icon("by.png", new BMap.Size(30,30));
var marker2 = new BMap.Marker(pt,{icon:myIcon}); // 创建标注
map.addOverlay(marker2);
var opts = {
width : 200, // 信息窗口宽度
height: 60, // 信息窗口高度
title : "by标题" // 信息窗口标题
}
var infoWindow = new BMap.InfoWindow("软硬件公司", opts); // 创建信息窗口对象
map.openInfoWindow(infoWindow,pt); //开启信息窗口
});
};
};
</script>
</head>
<body>
<input type="button" value="请求" id="input1" />
<div id="div1"></div>
</body>
</html>
结果
当然还有很多api，如滚轮缩放，3d图，热力图，自己再改一改，就快实现了。最主要先知道最基本的吧。
html5:地理信息 LBS基于地理的服务和百度地图API的使用的更多相关文章
- LBS 基于位置的服务
LBS (Location Based Services)基于位置的服务 基于位置的服务,它是通过电信移动运营商的无线电通讯网络(如GSM网.CDMA网)或外部定位方式(如GPS)获取移动终端用户的位 ...
- 【百度地图API】如何制作班级地理通讯录？LBS通讯录
原文:[百度地图API]如何制作班级地理通讯录?LBS通讯录 摘要:班级通讯录必备的功能,比如人员列表,人员地理位置标注,展示复杂信息窗口,公交和驾车等.一般班级人员都不会超过300个,因为可以高效地 ...
- HTML5地理定位，百度地图API，知识点熟悉
推断浏览器的兼容问题: IE9+支持地理定位,FF Chrome新版支持地理定位 if (navigator.geolocation) { alert('支持地理定位'); } e ...
- HTML5 调用百度地图API地理定位
<!DOCTYPE html> <html> <title>HTML5 HTML5 调用百度地图API地理定位实例</title> <head&g ...
- 跨平台移动开发_PhoneGap 使用Geolocation基于所在地理位置坐标调用百度地图API
使用Geolocation基于所在地理位置坐标调用百度地图API 效果图 示例代码 <!DOCTYPE html> <html> <head> <title& ...
- HTML5调用百度地图API进行地理定位实例
自从HTML5的标准确定以后,越来越多的网站使用HTML5来进行开发.虽然对HTML5支持的浏览器不是很多,但是依然抵挡不了大伙对HTML5开发的热情.今天为大家带来的是使用HTML5调用百度地图AP ...
- ***微信LBS地理位置开发+百度地图API(地理位置和坐标转换)
微信公众平台开发 - 获取用户地理位置 本文介绍在微信公众平台上如何使用高级接口开发获取用户地理位置的功能. 一.获取用户地理位置接口 开通了上报地理位置接口的公众号,用户在关注后进入公众号会话时,会 ...
- 基于MFC与第三方类CWebPage的百度地图API开发范例
在进行百度地图API开发之前你需要到http://developer.baidu.com/map申请密匙 密匙申请之后就可以进行百度地图API的开发了. 下面我们以在visual c++6.0里进行地 ...
- 基于百度地图api + AngularJS 的入门地图
转载请注明地址:http://www.cnblogs.com/enzozo/p/4368081.html 简介: 此入门地图为简易的“广州大学城”公交寻路地图,采用很少量的AngularJS进行inp ...
随机推荐
- express－2 express介绍
脚手架 大多数项目都需要一定数量的"套路化"代码,所有可以创建一个通用的项目骨架,每次开始新项目时,只需复制这个骨架,或者说是模板. RoR把这个概念向前推进了一步,它提供了一个可 ...
- js动画实现透明度动画
在本次实例中,由于一般主流的浏览器对于透明度opacity最大值为1,但是在IE6最大值是100,此次例子是按主流浏览器的透明度来算的,所以定义的是小数,也可以定义为整数为单位,在运算的时候遇到主流的 ...
- html中frameset的详细使用方法
http://blog.csdn.net/csb5201314/article/details/5695417
- POJ2976 Dropping tests（01分数规划）
题目大概说给n个二元组Ai和Bi,要去掉k个,求余下的100*∑Ai/∑Bi的最大值. 假设要的最大的值是ans,令Di=Ai-ans*∑Bi,对Di排序取最大的n-k个,如果∑Ai-ans*∑Bi& ...
- C#Excel的导入与导出
1.整个Excel表格叫做工作表:WorkBook(工作薄),包含的叫页(工作表):Sheet:行:Row:单元格Cell. 2.NPOI是POI的C#版本,NPOI的行和列的index都是从0开始 ...
- Code Rush插件
code rush 是微软推出的一款VS2008上的插件.他有强大的文件和代码导航功能,易于访问的重构和代码创建功能.一组编辑器.选择.剪贴板工具等. 教程链接 http://www.devexpre ...
- 【原】iOS多线程之异步任务+并行队列情况与异步任务+串行队列（主队列）情况
异步任务+并行队列 把异步任务放到并行队列进行执行,异步任务会在不同的线程中执行. /*异步执行+并行队列*/ - (IBAction)clickBasic1:(UIButton *)sender { ...
- NOIp 2014 #5 解方程 Label:数论？
题目描述 已知多项式方程: a0+a1x+a2x^2+..+anx^n=0 求这个方程在[1, m ] 内的整数解(n 和m 均为正整数) 输入输出格式 输入格式: 输入文件名为equation .i ...
- IOS 蓝牙相关-连接外设的代码实现(2)
我们具体说明一下中心模式的应用场景.主设备(手机去扫描连接外设,发现外设服务和属性,操作服务和属性的应用.一般来说,外设(蓝牙设备,比如智能手环之类的东西), 会由硬件工程师开发好,并定义好设备提供的 ...
- 实现UITableView循环利用
tableViewUITableView循环利用 前言 大家都知道UITableView,最经典在于循环利用,这里我自己模仿UITableView循环利用,写了一套自己的TableView实现方案,希 ...