Javascript进修总结 - html5完成定位地理位置

2019年8月30日 166次阅读 来源: AlphaGooo

简述

最近在苦逼进修Javascript，并且是有使命须要去完成的，因而就有一个主意要总结纪录一下本身的进修结果。此次的总结主题是html5完成定位地理位置的使命，连系原生的Javascript完成此功用。

html5

什么是html5？

  • 万维网的中心言语、范例通用标记言语下的一个运用超文本标记言语（HTML）的第五次严重修正版本，2014年10月29日，万维网同盟宣告，经由靠近8年的艰辛勤奋，该范例范例终究制订完成，命名为html5。

  • HTML5草案的前身名为 Web Applications1.0，于2004年被WHATWG提出，于2007年被W3C回收，并成立了新的HTML 事情团队。HTML 5 的第一份正式草案已于2008年1月22日宣布。

  • HTML5 仍处于完美当中。然则，大部分当代浏览器已具有了某些HTML5支撑。2012年12月17日，万维网同盟（W3C）正式宣告凝结了大批收集事情者心血的HTML5范例已正式定稿。依据W3C的发言稿称：“HTML5是开放的Web收集平台的奠基石。”

html5有什么特征和上风？

  • 支撑Html5的浏览器包含Firefox（火狐浏览器），IE9及其更高版本，Chrome（谷歌浏览器），Safari，Opera等；国内的游览浏览器（Maxthon），以及基于IE或Chromium（Chrome的工程版或称试验版）所推出的360浏览器、搜狗浏览器、QQ浏览器、猎豹浏览器等国产浏览器一样具有支撑HTML5的才能。

  • HTML5手机运用的最大上风就是可以在网页上直接调试和修正。

  • HTML5的设想目标是为了在挪动装备上支撑多媒体。新的语法特征被引进以支撑这一点，如video、audio和canvas标记。HTML5还引进了新的功用，可以真正转变用户与文档的交互体式格局。

html能做什么？

  • 挪动web

  • 手机APP

  • 更好的PC站点优化

html5 – 地理位置定位手艺

  • 这里是我在我的demo下的完成思绪，你大可作为参考也可以斧正一下我的思绪的题目，感谢。

  • 地理位置（Geolocation）是 HTML5 的主要特征之一，供应了肯定用户位置的功用，借助这个特征可以开辟基于位置信息的运用。在我的demo中运用的是百度供应的api接口，挪用html5的geolocation要领猎取客户端当前经纬度，从而取得客户端地点的地理位置，包含省市区信息，甚至有街道、门牌号等细致的地理位置信息。

  • 值得注意的一点是，PC许多浏览器关于html5的定位手艺是不太友爱的，许多浏览器都是默许谢绝定位，平常只要IE是可以一般运用，然则猎取到的经纬度误差很大（这个缘由极多是由于PC的定位猎取客户机位置的时刻不是当前电脑的位置，而多是浏览器挪用服务器的物理机械的位置，不知道这个缘由）；相反在手机接见的时刻，由于平常手机上都有GPS模块，所以定位结果会好许多，缘由就在于手机上的GPS模块对geolocation特征的支撑是很好的。终究的结论是，html5的定位在手机上测试是最好的挑选，PC发起运用IE浏览器。

详细完成计划

  • 好了，空话不多说（实在已说了许多），立马进入实战阶段。

function getLocation() {
    var options = {
        enableHighAccuracy : true,
        maximumAge : 1000
    }
    alert('this is getLocation()');
    if (navigator.geolocation) {
        //浏览器支撑geolocation
        navigator.geolocation.getCurrentPosition(onSuccess, onError, options);
    } else {
        //浏览器不支撑geolocation
        alert('您的浏览器不支撑地理位置定位');
    }
}

  • 这里我写了一个要领，主要功用是在挪用html5的geolocation()前，先推断当前浏览器是不是支撑html5，这个推断基础在许多PC浏览器都邑让顺序挂掉（缘由就是PC绝大部分浏览器不支撑或许谢绝html5定位）.

  • 假如浏览器支撑，那末顺序就会挪用geolocation要领了，这是要领内里有2个回调函数：一个是定位胜利后的处置惩罚操纵（平常顺序会返回经纬度给你举行后续的定位数据处置惩罚），别的一个是定位失利后的处置惩罚操纵（详细也许就是毛病信息，然后就是你的定位失利后的后续操纵），第三个参数很少用到，我本身也没有去关注它有什么用，列位看官有兴致可以相识一下。

//胜利时
function onSuccess(position) {
    //返回用户位置
    //经度
    var longitude = position.coords.longitude;
    //纬度
    var latitude = position.coords.latitude;
    alert('当前地点的经纬度：经度' + longitude + '，纬度' + latitude);
    //依据经纬度猎取地理位置，不太正确，猎取都市地区照样可以的
    var map = new BMap.Map("allmap");
    var point = new BMap.Point(longitude, latitude);
    var gc = new BMap.Geocoder();
    gc.getLocation(point, function(rs) {
        var addComp = rs.addressComponents;
        alert(addComp.province + ", " + addComp.city + ", "+ addComp.district + ", " + addComp.street + ", "+ addComp.streetNumber);
    });
    postData(longitude, latitude);
}

  • 我这里写了一个胜利后的回调函数，第一步猎取定位胜利返回的经纬度数据，然后连系百度那里供应的接口举行详细位置的转换，末了我另有一个数据提交的要领，这个是我详细营业的后续操纵了，你可以依据详细情况举行特别处置惩罚。下面附上百度接口：

<script src="http://api.map.baidu.com/api?v=1.4" type="text/javascript"></script>
//失利时
function onError(error) {
    switch (error.code) {
        case 1:
            alert("位置服务被谢绝");
            break;
        case 2:
            alert("临时猎取不到位置信息");
            break;
        case 3:
            alert("猎取信息超时");
            break;
        case 4:
            alert("未知毛病");
            break;
    }
    //经度
    var longitude = 23.1823780000;
    //纬度
    var latitude = 113.4233310000;
    postData(longitude, latitude);
}

  • 紧接着就是定位失利的回调函数了，这个就简朴输出毛病信息，然后我也写了一个失利后的后续操纵，你可以依据你的须要举行本身的详细操纵。

  • 如许，全部html5定位算是完成了，不算太难，但也不简朴，由于内里有许多可发掘的空间，比方定位精度，定位局限，另有详细的舆图定位和导航扩大的后续开辟，可以说可扩大性很强，难度也会逐渐提拔，所以是一个值得研讨的手艺，我的手艺有限，先研讨到这里吧，末了附上完全的代码。

完全demo代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>demo</title>
</head>
<body>
</body>
</html>
<script src="http://api.map.baidu.com/api?v=1.4" type="text/javascript"></script>
<script type="text/javascript" >

function getLocation() {
    var options = {
        enableHighAccuracy : true,
        maximumAge : 1000
    }
    alert('this is getLocation()');
    if (navigator.geolocation) {
        //浏览器支撑geolocation
        navigator.geolocation.getCurrentPosition(onSuccess, onError, options);
    } else {
        //浏览器不支撑geolocation
        alert('您的浏览器不支撑地理位置定位');
    }
}

//胜利时
function onSuccess(position) {
    //返回用户位置
    //经度
    var longitude = position.coords.longitude;
    //纬度
    var latitude = position.coords.latitude;
    alert('当前地点的经纬度：经度' + longitude + '，纬度' + latitude);
    //依据经纬度猎取地理位置，不太正确，猎取都市地区照样可以的
    var map = new BMap.Map("allmap");
    var point = new BMap.Point(longitude, latitude);
    var gc = new BMap.Geocoder();
    gc.getLocation(point, function(rs) {
        var addComp = rs.addressComponents;
        alert(addComp.province + ", " + addComp.city + ", "+ addComp.district + ", " + addComp.street + ", "+ addComp.streetNumber);
    });
    // 这里背面可以写你的后续操纵了
    postData(longitude, latitude);
}
//失利时
function onError(error) {
    switch (error.code) {
        case 1:
            alert("位置服务被谢绝");
            break;
        case 2:
            alert("临时猎取不到位置信息");
            break;
        case 3:
            alert("猎取信息超时");
            break;
        case 4:
            alert("未知毛病");
            break;
    }
    // 这里背面可以写你的后续操纵了
    //经度
    var longitude = 23.1823780000;
    //纬度
    var latitude = 113.4233310000;
    postData(longitude, latitude);
}

// 页面载入时要求猎取当前地理位置
window.onload = function(){
    // html5猎取地理位置
    getLocation();
};
</script>

总结

  • html5定位手艺的扩大性很强，手艺运用局限很广，也是很有代价的一门手艺，值得研讨。

  • geolocation的两个回调函数有许多设想空间，值得我们沉思研讨。

  • 关于我来讲，我算是收成一门妙技，在手机定位上的一个手艺。

    原文作者：AlphaGooo
    原文地址: https://segmentfault.com/a/1190000004048824
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞