HTML中的地理定位功能的实现例子有什么？
HTML中的地理定位功能的实现例子有什么？
展开
收起
版权声明：本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
1
条回答
写回答
-
例子： 参考百度地图开放平台：http://lbsyun.baidu.com/index.php?title=jspopular3.0/guide/helloworld
<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <!--下面我们添加一个meta标签，以便使您的页面更好的在移动平台上展示。--> <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0,user-scalable=no"> <title>JS获取当前地理位置的方法</title> </head> <body> <!--可以自己定义body体内容--> </body> <!--引用百度地图API文件， 您的秘钥的获取方式是注册为百度地图的开发者，创建应用--> <script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=您的密钥"> //v3.0版本的引用方式：src="http://api.map.baidu.com/api?v=3.0&ak=您的密钥" </script> <script type="text/javascript"> // 创建一个函数，主要功能是在调用html5的geolocation()前，先判断当前浏览器是否支持html5，（PC绝大部分浏览器不支持或者拒绝html5定位） function getLocation() { var options = { enableHighAccuracy: true, maximumAge: 1000 }; alert('获取位置信息开始--------->'); 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); }); // 这里后面可以写你的后续操作了 handleData(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 = 39.9151; // 纬度 var latitude = 116.4041; handleData(longitude, latitude); } // 页面载入时请求获取当前地理位置 window.onload = function () { // html5获取地理位置 getLocation(); }; </script> </html>2022-03-28 17:47:31赞同 展开评论
相关问答