Home > Article > Web Front-end > How to operate JS to obtain the city and geographical location of the user
How to operate JS to obtain the city and geographical location of the user
- php中世界最好的语言Original
- 2018-06-02 14:27:352202browse
This time I will show you how to operate JS to obtain the city and geographical location of the user. What are the precautions for operating JS to obtain the city and geographical location of the user? The following is a practical case. Let’s take a look. .
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>获取用户地理位置</title>
<script type="text/javascript" src="./jquery-3.3.1.js"></script>
</head>
<body>
</body>
</html>
<script>
$.getScript('http://int.dpool.sina.com.cn/iplookup/iplookup.php?format=js',function(){
alert(remote_ip_info.country);//国家
alert(remote_ip_info.province);//省份
alert(remote_ip_info.city);//城市
});
</script>
JS to get the user’s geographical location
<script type="text/javascript">
var x = document.getElementById("x");
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition, showError);
} else {
x.innerHTML = "该浏览器不支持定位功能！";
}
}
function showPosition(position) {
x.innerHTML = "纬度：" + position.coords.latitude + "\n经度："
+ position.coords.longitude;
}
function showError(error) {
switch (error.code) {
case error.PERMISSION_DENIED:
x.innerHTML = "用户拒绝对获取地理位置的请求。";
break;
case error.POSITION_UNAVAILABLE:
x.innerHTML = "位置信息是不可用的。";
break;
case error.TIMEOUT:
x.innerHTML = "请求用户地理位置超时。";
break;
case error.UNKNOWN_ERROR:
x.innerHTML = "未知错误。";
break;
}
}
getLocation();
</script> I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the PHP Chinese website! Recommended reading:
How to use vue.js and element-ui to implement the menu tree structure
How to use vue Inner .sync modifier
The above is the detailed content of How to operate JS to obtain the city and geographical location of the user. For more information, please follow other related articles on the PHP Chinese website!
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：How to use bootstrap in vue-cli projectNext article：How to use bootstrap in vue-cli project