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 ...
随机推荐
- 如何清除windows 用户名及密码
- bpl 包的编写和引用
转载:http://www.cnblogs.com/gxch/archive/2011/04/23/bpl.html 为什么要使用包? 答案很简单:因为包的功能强大.设计期包(design-time ...
- JS原型对象通俗"唱法"
书上对于原型对象的说法给我整的眼花缭乱,完全不知道它在说什么,查了好多资料,终于有了些理解,下面我以通俗的大白话说说我对原型对象的理解. 1.关于原型对象的重要知识点 首先要知道一个很重要的知识点,一 ...
- HDU5461 Largest Point（暴力）
这题第一眼就想到暴力.. 枚举每一个ti,就能确定tj,tj一定是剩下数最大或最小的.为了求tj就要求出数列最大最小次大次小.时间复杂度O(n). 感觉暴力挺有趣的. #include<cstd ...
- MongoDB 入门之基础 DCL
此文章主要记录部分主要的 MongoDB 的 DCL 操作. MongoDB 默认不需要用户名和密码就可以用 mongodb.exe 登录 一.开启 MonogoDB 的权限模式 修改 MongoDB ...
- The StringFormat property
As we saw in the previous chapters, the way to manipulate the output of a binding before is shown is ...
- BZOJ4369 : [IOI2015]teams分组
将分组计划按照$k$从小到大排序,维护一个单调栈,每个元素为一个矩形,按最底下元素从高到低排列,栈顶最低. 每次加入一个矩形可选区域,维护单调栈,可以往回合并. 然后将所有最低点不满足的矩形取出,合并 ...
- 使用for( var each in record){} 去寻找object里面的内容；
for(var each in object){ alert(each); }
- Hbase1.0 客户端api
最近在试用Hbase1.0的客户端API,发觉变化还是挺大(以前版本也不熟).到处都是deprecated. 现在应该是这样子: Configuration conf = HBaseConfigur ...
- PHP5中魔术方法
魔术函数 1.__construct() 实例化对象时被调用, 当__construct和以类名为函数名的函数同时存在时,__construct将被调用,另一个不被调用. 2.__destruct() ...