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 ...
随机推荐
- CSS3-html，样式与样式表的创建，选择器
- js动画实现透明度动画
在本次实例中,由于一般主流的浏览器对于透明度opacity最大值为1,但是在IE6最大值是100,此次例子是按主流浏览器的透明度来算的,所以定义的是小数,也可以定义为整数为单位,在运算的时候遇到主流的 ...
- 当 NSDictionary 遇见 nil
Demo project: NSDictionary-NilSafe 问题 相信用 Objective-C 开发 iOS 应用的人对下面的 crash 不会陌生: *** -[__NSPlacehol ...
- putty ssh连接老断
有两种方法来解决:一. 配置客户端 1 在 linux下的ssh命令:vim /etc/ssh/ssh_config 然后找到里面的ServerAliveInterval 参数,如果没有你同样自己加一 ...
- BZOJ2652 : 三角板
首先旋转坐标系,假设$(x,y)$被$(X,Y)$遮挡等价于$X\leq x$且$Y\leq y$. 对于每种坐标系建立两棵线段树: 第一棵按$x$维护已经加入的点的$y$的最小值: 第二棵按$x$维 ...
- 建立php开发环境(XAMPP + Xdebug+Zend Studio)
1. 安装XAMPP和Zend Studio Zend Studio下载地址: http://pan.baidu.com/s/1o6BjvAE XAMPP 下载地址: http://pan.baidu ...
- Hadoop学习笔记（1）
Doug Cutting Lucene(索引引擎)---Nutch(搜索Data抓取)---Hadoop 1997:Lucene 2003:GFS 2004:NDFS\MapReduce\Nutch ...
- Javascript中括号“[]”的多义性
摘要:本文就是主要是分享JavaScript中括号的四种语义. Javascript中括号有四种语义 语义1,声明数组 var ary = []; // 声明一个空数组 var ary = [1,3] ...
- sdoi 2009 & 状态压缩
是不是平时在手机里玩吃豆豆游戏玩腻了呢?最近MOKIA手机上推出了一种新的围豆豆游戏,大家一起来试一试吧. 游戏的规则非常简单,在一个N×M的矩阵方格内分布着D颗豆子,每颗豆有不同的分值Vi.游戏者可 ...
- eclipse 高亮配对的括号
在编辑代码框右键->preference,直接就可以看到Matching brackets highlights