最近从python转学JavaScript,发现JavaScript其实更贴近html,运用起来更加灵活自如。
JavaScript里面有一个最大的对象--window,通常通过window.XXX来调用相应的属性,例如window.οnlοad=XXX可以使XXX函数在html加载完后定义。
其中window里面有一个属性navigator,它可以获得用户浏览器的各种信息,其中就包括地址。
首先,我写好了一个用来显示结果的html文档。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8"/>
<title></title>
<script src="http://api.map.baidu.com/api?v=1.2"></script>
<script type="text/javascript" src="http://developer.baidu.com/map/jsdemo/demo/convertor.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="geolocation.js"></script>
</head>
<body>
<button id="getPositonbt">获取当前位置</button> <wbr> <wbr> <wbr> <wbr>
<button id="showmapbt">在百度地图上打开当前位置</button><br/><br/>
<p id="myLocation"></p><br/><br/>
<div style="width:720px;height:540px;border:1px solid gray" id="baiduMap"></div>
</body>
</html>
其中引用了jQuery
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
还应用了位置纠偏的函数库,为什么要引用后面会稍作解释~。~
<script type="text/javascript" src="http://developer.baidu.com/map/jsdemo/demo/convertor.js"></script>
可以看到html使用了本地geolocation.js文档,给出源码:
//geolocation.js
var mylatitud = null;
var mylongitude = null;
var map = null;
window.onload = initfunction;
function initfunction() {
$("#getPositonbt").click(getPosition);
$("#showmapbt").click(showBaiduMap);
}
function getPosition() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(
displayPositon,
displayError,
{timeout:30000, maximumage:0}
);
} else {
alert("Your browser seems not support Geolocation API");
}
}
function displayPositon(position) {
$("#myLocation").text("Your position is: " + position.coords.latitude +" " + position.coords.longitude + " (Accurary:" + position.coords.accuracy + ")");
mylatitud = position.coords.latitude;
mylongitude = position.coords.longitude;
}
function displayError() {
alert("Error occurs when calling getCurrentPostion function");
}
function showBaiduMap() {
if ((mylatitud == null)||(mylongitude == null)) {
alert("Please get your position first");
} else {
if (map == null){
var map = new BMap.Map("baiduMap");
var centerPoint = new BMap.Point(mylongitude, mylatitud);
// 转换接口
BMap.Convertor.translate(centerPoint, 0, function(point) {
var marker = new BMap.Marker(point);
map.addOverlay(marker);
map.centerAndZoom(point, 15);
});
map.addControl(new BMap.NavigationControl());
map.addControl(new BMap.ScaleControl());
map.addControl(new BMap.OverviewMapControl());
}
}
}
在initfunction里面初始化了两个按钮的点击事件,分别对应获取经纬度函数、显示地图函数。
在getPosition里通过navigator.geolocation的返回值判断浏览器是否支持跟踪地址。然后调用navigator.geolocation.getCurrentPosition(getPos,error,timeout),getPos为回调函数,这里定义为displayPositon(position),其中position是回调的结果,获取其经纬度分别赋值给mylatitud和mylongitude。error为出错时调用的函数,timeout是浏览器等待回应的最大延时。
再来看showBaiduMap,调用百度地图API,获取一个Map类对象:
var map = new BMap.Map("baiduMap");
BMap.Convertor.translate(centerPoint, 0, function(point) {
var marker = new BMap.Marker(point);
map.addOverlay(marker);
map.centerAndZoom(point, 15);
});
其中marker是标签,用来标注位置的,通过addOverlay覆盖在地图上。centerAndZoom顾名思义就是地图显示中心和缩放比例。
剩下的就是添加一些地图显示的工具栏
map.addControl(new BMap.NavigationControl());
map.addControl(new BMap.ScaleControl());
map.addControl(new BMap.OverviewMapControl());
然后结果就出来了:(这里注意,Chorme和Firefox这类浏览器似乎安全起见都默认浏览器不能跟踪用户位置,若不更改设置是看不到结果的。你可以通过使用IE解决此问题。)
可以看到没纠偏的准确度只有71%。我上网查了一下关于定位误差如此之大的原因,结果呵呵,貌似发现了不得了的东西!这个位置偏差原来是人为造成的,我们国家处于安全考虑使用了“火星坐标”。“火星坐标”是国家保密插件,也叫做加偏或者SM模组,其实就是对真实坐标系统进行人为的加偏处理,按照特殊的算法,将真实的坐标加密成虚假的坐标,而这个加偏并不是线性的加偏,所以各地的偏移情况都会有所不同。所有的GPS公司,只要需要汽车导航的,需要用到导航电子地图的,都需要在软件中加入国家保密算法,将COM口读出来的真实坐标信号,加密转换成国家要求的保密坐标。
呵呵,这难道是为了导弹打偏么。。