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图，热力图，自己再改一改，就快实现了。最主要先知道最基本的吧。