一、首先要明白位置信息从何而来,以下就是
IP地址
GPS全球定位系统
Wi-Fi无线网络
基站
二、获取地理信息的方法 navigator.geolocation
1、单次定位请求 :getCurrentPosition(请求成功,请求失败,数据收集方式)
2、多次定位请求 : watchPosition(请求成功,请求失败,数据收集方式) 移动设备有用,位置改变才会触发 ,特有属性: frequency 更新的频率
a、请求成功函数
经度 : coords.longitude
纬度 : coords.latitude
准确度 : coords.accuracy
海拔 : coords.altitude
海拔准确度 : coords.altitudeAcuracy
行进方向 : coords.heading
地面速度 : coords.speed
请求的时间: new Date(position.timestamp)
b、请求失败函数
失败编号 :code
0 : 不包括其他错误编号中的错误
1 : 用户拒绝浏览器获取位置信息
2 : 尝试获取用户信息,但失败了
3 : 设置了timeout值,获取位置超时了
c、数据收集 : json的形式
enableHighAcuracy : 更精确的查找,默认false
timeout : 获取位置允许最长时间,默认infinity
maximumAge : 位置可以缓存的最大时间,默认0
1、单次定位请求 :getCurrentPosition(请求成功,请求失败,数据收集方式)
如:
<input type="button" value="请求" id="btn">
<div id="div"></div>
<script>
var btn = document.getElementById("btn");
var div = document.getElementById("div");
btn.onclick = function(){
navigator.geolocation.getCurrentPosition( //单次定位请求
function(position){ //获取成功后得到的参数
div.innerHTML += "经度:"+ position.coords.longitude + "\n";
div.innerHTML += "纬度:"+ position.coords.latitude + "\n";
div.innerHTML += "准确度:"+ position.coords.accuracy + "\n";
div.innerHTML += "海拔准确度 :"+ position.coords.altitudeAcuracy + "\n";
div.innerHTML += "行进方向:"+ position.coords.heading + "\n";
div.innerHTML += "地面速度:"+ position.coords.speed + "\n";
div.innerHTML += "请求的时间:"+ new Date(position.timestamp);
},function(err){
alert(err.code); //获取失败后得到的参数
},{
enableHighAcuracy : true,
timeout : 2000, //超过时候则获取失败
maximumAge : 5000 //位置可以缓存的最大时间
});
}
2、多次定位请求 : watchPosition(请求成功,请求失败,数据收集方式) 移动设备有用,位置改变才会触发
var btn = document.getElementById("btn");
var div = document.getElementById("div");
var time = null;
btn.onclick = function(){
time = navigator.geolocation.watchPosition(function(position){ //多次定位请求方式
div.innerHTML += "经度:"+ position.coords.longitude + "\n";
div.innerHTML += "纬度:"+ position.coords.latitude + "\n";
div.innerHTML += "准确度:"+ position.coords.accuracy + "\n";
div.innerHTML += "海拔准确度 :"+ position.coords.altitudeAcuracy + "\n";
div.innerHTML += "行进方向:"+ position.coords.heading + "\n";
div.innerHTML += "地面速度:"+ position.coords.speed + "\n";
div.innerHTML += "请求的时间:"+ new Date(position.timestamp);
},function(err){
alert(err.code);
},{
enableHighAcuracy : true,
timeout : 5000,
maximumAge : 5000,
frequency : 1000 //特有属性,每隔多长时间获取一次
});
}
**三、使用百度地图**
下面是利用百度地图的开发模式的代码,通过经纬度设置位置展开地图
<!doctype html><!--声明当前文档为html文档-->
<html lang="en"><!--语言为英语-->
<head><!--头部-->
<meta charset="UTF-8"><!--字符编码:utf-8国际编码 gb2312中文编码-->
<meta name="Keywords" content="关键词">
<meta name="Description" content="描述">
<title>Document</title>
<style>/*css样式表的衣柜*/
#div1{
width:400px;height:400px;border:1px solid red;
}
.anchorBL{
display:none;
}
</style>
<script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=EEcbHuCX7BYY4iBQex4fjLtiEnAXCklO"></script>
</head>
<body><!--身体-->
<div id="div1"></div>
<script>
var y,x;
navigator.geolocation.getCurrentPosition(function(position){
y = position.coords.longitude;
x = position.coords.latitude
});
var pt = new BMap.Point(113.741829,23.04009)
var map = new BMap.Map("div1"); // 创建Map实例
map.centerAndZoom(pt, 11); // 初始化地图,设置中心点坐标和地图级别
//map.addControl(new BMap.MapTypeControl()); //添加地图类型控件
//map.setCurrentCity("北京"); // 设置地图显示的城市 此项是必须设置的
map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
var marker = new BMap.Marker(pt); // 创建标注
map.addOverlay(marker); // 将标注添加到地图中
map.centerAndZoom(pt, 15);
var opts = {
width : 200, // 信息窗口宽度
height: 100, // 信息窗口高度
title : "广科" , // 信息窗口标题
//enableMessage:true,//设置允许信息窗发送短息
//message:"欢迎同学们来到潭州教育!~"
}
var infoWindow = new BMap.InfoWindow("地址:广科", opts); // 创建信息窗口对象
//map.openInfoWindow(infoWindow,pt); //开启信息窗口
marker.addEventListener("click", function(){
map.openInfoWindow(infoWindow,pt); //开启信息窗口
});
</script>
</body>
</html>