基于JavaScript定位当前的地理位置
2019/6/27 21:02:10
本文主要是介绍基于JavaScript定位当前的地理位置,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
本文实例为大家分享了js定位当前地理位置的具体代码,供大家参考,具体内容如下
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0,user-scalable=no"> <title>Title</title> </head> <body> 您目前在<p></p> </body> <script> //定义一个空的位置构造函数 function Location(){}; //定义一个可以获得经纬度的方法 Location.prototype.getLocation = function(callback){ var options = { enableHighAccuracy: true, maximumAge: 1000 }; this.callback = Object.prototype.toString.call(callback) =="[object Function]" ? callback : function(address){ alert(address.province + address.city); console.log("getocation(callbackFunction) 可获得定位信息对象"); }; var self = this; if (navigator.geolocation) { //浏览器支持geolocation navigator.geolocation.getCurrentPosition(function(position){ //经度 var longitude = position.coords.longitude; //纬度 var latitude = position.coords.latitude; self.loadMapApi(longitude,latitude); }, self.onError, options); } else { //浏览器不支持geolocation } }; //定义一个可以解析经纬度的方法,调用百度的api Location.prototype.loadMapApi = function(longitude, latitude){ var self = this; var oHead = document.getElementsByTagName('HEAD').item(0); var oScript= document.createElement("script"); oScript.type = "text/javascript"; oScript.src="http://api.map.baidu.com/getscript?v=2.0&ak=A396783ee700cfdb9ba1df281ce36862&services=&t=20140930184510"; oHead.appendChild(oScript); oScript.onload = function(date){ var point = new BMap.Point(longitude, latitude); var gc = new BMap.Geocoder(); gc.getLocation(point, function(rs) { var addComp = rs.addressComponents; self.callback(addComp); }); } }; //定义出现查询位置出现意外的方法 Location.prototype.onError = function(error) { switch (error.code) { case 1: alert("位置服务被拒绝"); break; case 2: alert("暂时获取不到位置信息"); break; case 3: alert("获取信息超时"); break; case 4: alert("未知错误"); break; } }; //调用 var local = new Location(); local.getLocation(function(res){ var str="" for(i in res ){ str=res[i]+str } document.querySelector("p").innerHTML=str; }) </script> </html>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持找一找教程网。
这篇关于基于JavaScript定位当前的地理位置的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-11-23Vue新手入门教程:从零开始学习Vue框架
- 2024-11-23如何集成Ant Design Vue的图标
- 2024-11-23如何集成Ant Design Vue图标
- 2024-11-23使用vue CLI快速搭建Vue项目教程
- 2024-11-23Vue CLI多环境配置简单教程
- 2024-11-23Vue3入门教程:轻松搭建你的第一个Vue3应用
- 2024-11-23Vue3+Vite快速上手指南
- 2024-11-23Vue3阿里系UI组件入门指南
- 2024-11-23Vue3的阿里系UI组件入门指南
- 2024-11-23Vue3公共组件入门教程