Html5 Geolocation获取地理位置信息实例
程序员文章站
2023-11-23 21:53:58
这篇文章主要介绍了Html5 Geolocation获取地理位置信息实例，具有一定的参考价值，有兴趣的同学可以了解一下。... 16-12-09...
html5中提供了地理位置信息的api，通过浏览器来获取用户当前位置。基于此特性可以开发基于位置的服务应用。在获取地理位置信息前，首先浏览器都会向用户询问是否愿意共享其位置信息，待用户同意后才能使用。
html5获取地理位置信息是通过geolocation api提供，使用其getcurrentposition方法，此方法中有三个参数，分别是成功获取到地理位置信息时所执行的回调函数，失败时所执行的回调函数和可选属性配置项。
如下demo演示了通过geolocation获取地理位置信息，并在百度地图上显示当前位置（通过调用百度地图api）。实验结果发现位置被定位到了大学城内环东四路入口处，与本人所在位置（华工学生宿舍）偏差还是有点大的，达到200-300米左右。
代码如下所示（其中convertor.js为百度地图提供的坐标转化文件）：
<!doctype html>
<html>
<head>
<title>h5地理位置demo</title>
<script src="http://api.map.baidu.com/api?v=1.3" type="text/javascript">
</script>
<script type="text/javascript" src="convertor.js">
</script>
</head>
<body>
<div id="map" style="width:600px; height:400px">
</div>
</body>
<script type="text/javascript">
if (window.navigator.geolocation) {
var options = {
enablehighaccuracy: true,
};
window.navigator.geolocation.getcurrentposition(handlesuccess, handleerror, options);
} else {
alert("浏览器不支持html5来获取地理位置信息");
}
function handlesuccess(position){
// 获取到当前位置经纬度 本例中是chrome浏览器取到的是google地图中的经纬度
var lng = position.coords.longitude;
var lat = position.coords.latitude;
// 调用百度地图api显示
var map = new bmap.map("map");
var ggpoint = new bmap.point(lng, lat);
// 将google地图中的经纬度转化为百度地图的经纬度
bmap.convertor.translate(ggpoint, 2, function(point){
var marker = new bmap.marker(point);
map.addoverlay(marker);
map.centerandzoom(point, 15);
});
}
function handleerror(error){
}
</script>
</html>
convertor.js文件：
(function() { // 闭包
function load_script(xyurl, callback) {
var head = document.getelementsbytagname('head')[0];
var script = document.createelement('script');
script.type = 'text/javascript';
script.src = xyurl;
// 借鉴了jquery的script跨域方法
script.onload = script.onreadystatechange = function() {
if ((!this.readystate || this.readystate === "loaded" || this.readystate === "complete")) {
callback && callback();
// handle memory leak in ie
script.onload = script.onreadystatechange = null;
if (head && script.parentnode) {
head.removechild(script);
}
}
};
// use insertbefore instead of appendchild to circumvent an ie6 bug.
head.insertbefore(script, head.firstchild);
}
function translate(point, type, callback) {
var callbackname = 'cbk_' + math.round(math.random() * 10000); // 随机函数名
var xyurl = "http://api.map.baidu.com/ag/coord/convert?from=" + type
+ "&to=4&x=" + point.lng + "&y=" + point.lat
+ "&callback=bmap.convertor." + callbackname;
// 动态创建script标签
load_script(xyurl);
bmap.convertor[callbackname] = function(xyresult) {
delete bmap.convertor[callbackname]; // 调用完需要删除改函数
var point = new bmap.point(xyresult.x, xyresult.y);
callback && callback(point);
}
}
window.bmap = window.bmap || {};
bmap.convertor = {};
bmap.convertor.translate = translate;
})();
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。