js获取位置信息的demo

    xiaoxiao2021-03-25  98

    用js做一个获取位置信息的demo。主要涉及的位置信息有,经纬度、所处城市名称。 js的2种方法: 1 用百度提供的api去获取。 2 根据浏览器去获取位置信息。

    1 用百度的api获取位置信息。 但是百度api有时会出现引用的报错,不是很稳定。

    <script src="https://img.hcharts.cn/jquery/jquery-1.8.3.min.js"></script> <script src="https://cdn.bootcss.com/jquery-migrate/1.3.0/jquery-migrate.js"></script> <script src="http://api.map.baidu.com/api?v=1.2" type="text/javascript"></script> <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.3"></script> <script type="text/javascript" src="http://developer.baidu.com/map/jsdemo/demo/convertor.js"></script> $(document).ready(function(){ function getLocation() { var mycity = BMap.LocalCity();//new 类的一个实例化 mycity.get(getcityByIP);//百度api获取,调用函数 function getcityByIp { console.log(rs);//参数rs中包含一系列的位子信息 } } window.onload=getLocation;//文档加载完成就调用位置信息函数 });

    第二种 用浏览器自己的功能物获取位置信息。 用浏览器的话,由于要浏览器支持才行,如果用户浏览器不支持则没用。而且浏览器支持而没有打开定位功能也不行,在google浏览器中,如果没有打开定位功能,浏览器会提示用户,这在一定程度上会降低程序的速度和效率。 而且浏览器提供的位置信息中不包含城市名称,u、也就是说我们需要用浏览器提供经纬度,在借用第三方插件去得到城市的名称。

    <script src="https://img.hcharts.cn/jquery/jquery-1.8.3.min.js"></script> <script src="https://cdn.bootcss.com/jquery-migrate/1.3.0/jquery-migrate.js"></script> $(document).ready(function(){ function getLocation() { var options = { enableHighAccuracy:true, maximumAge:1000 }; if (navigator.geolocation) { //浏览器支持geolocation navigator.geolocation.getCurrentPosition(onSuccess, onError, options);//调用成功则调用onSuccess函数,失败则调用onError函数 } else { //浏览器不支持geolocation error();//调用error函数提示用户 } } function error() { alert("sorry , your brower is not used for this position! "); } function onError(position) { console.log(position);//打印错误信息 } function onSuccess(position) { console.log(position);//打印位置信息 } getLocation(); });

    第三种是2种方法的总结 在浏览器支持的情况下,调用浏览器的位置信息。如果浏览器不支持调用百度api去获取位置信息。但是由于浏览器位置信息中不包含城市名称。所以推荐还是用api,因为要得到城市名称终究还是要调用插件。

    function getLocation() { if(navigator.geolocation) { //浏览器支持,用浏览器获取 var options = { enableHighAccuracy:true, maximumAge:1000 }; navigator.geolocation.getCurrentPosition(success,error,options); } else { //浏览器不支持,用百度的api获取 var myCity = new BMap.LocalCity(); myCity.get(getCity); } } function getCity(rs) { console.log(rs); } function success(position) { console.log(position); } function error(position) { console.log(position); alert("sorry"); } window.onload = getLocation;
    转载请注明原文地址: https://ju.6miu.com/read-16115.html

    最新回复(0)