js获取本地地址

最新推荐文章于 2025-09-14 11:31:34 发布

原创最新推荐文章于 2025-09-14 11:31:34 发布 · 1.8k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#JavaScript #navigator #map

javascript 专栏收录该内容

3 篇文章

订阅专栏

最近从python转学JavaScript，发现JavaScript其实更贴近html，运用起来更加灵活自如。

JavaScript里面有一个最大的对象--window，通常通过window.XXX来调用相应的属性，例如window.onload=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>

还应用了位置纠偏的函数库，为什么要引用后面会稍作解释~。~

可以看到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");

位置纠偏：（如果不经过此函数纠偏，我出来的结果距离真实位置有近1公里的误差！= =）

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口读出来的真实坐标信号，加密转换成国家要求的保密坐标。

呵呵，这难道是为了导弹打偏么。。