JavaScript获取地理位置

最新推荐文章于 2022-12-30 13:16:28 发布

Gorzing

最新推荐文章于 2022-12-30 13:16:28 发布

阅读量3.4k

点赞数 5

分类专栏：笔记

本文链接：https://blog.csdn.net/qq_46358639/article/details/104493838

版权

笔记专栏收录该内容

5 篇文章 0 订阅

订阅专栏

众所周知（雾），浏览器确定你的位置的方法有以下四种：

GPS
IP address
蜂窝电话
Wi-Fi
这里暂且不谈各种方式的优缺点，但很多小伙伴可能会疑惑:
这么多方式，浏览器到底该采取哪种方式来确定我的位置呢？
其实不必疑惑，浏览器会根据情况自行选择，通常顺序是：
蜂窝电话 -> Wi-Fi或GPS.
IP地址在城市中会更加精确
虽然没有了解这些的必要，但多知道一点总没坏处。
OK,话不多说，我们切入正题。
——————————分割线————————————————
我们先建立一个基本的html页面:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Where am I?</title>
    <script src="./myLoc.js"></script>
</head>
<body>
    <div id="location">
    	<!--注意，id为"location"-->
        Your location will go here.
    </div>
</body>
</html>

接下来创建一个myLoc.js文件，存放我们的js代码
在这里插入图片描述
首先是一个getMyLocation函数

function getMyLocation() {  
    if (navigator.geolocation) {
        //检测浏览器是否支持地理定位API
        navigator.geolocation.getCurrentPosition(displayLocation, displayError);
        //navigator.geolocation属性是一个对象，其中包含整个地理定位API，这个API支持的主要方法是getCurrentPosition
        //getCurrentPosition的工作是获取浏览器位置，有三个参数，其中两个是可选的
        //参数：successHandler, errorHandler, options
        //successHandler是一个函数，如果浏览器能成功确定位置就会调用这个函数（必选）
        //errorHandler，字面意思，如果浏览器无法确定位置就会调用这个函数（可选）
        //options，允许定制地理定位方法
    } else {
        alert("Oops, no geolocation support.");
    }
}

window.onload = getMyLocation;

这函数的主要内容都在注释中，建议先把注释看完再接着往下食用~

我们接下来的工作，就是编写当浏览器成功获取位置之后所调用的函数：

function displayLocation(position) { 
    /*当getCurrent成功调用displayLocation时，会向此函数传入一个position对象
        这个position对象包含有关浏览器位置的信息，包括一个有纬度和经度的coordinates对象*/ 
    var latitude = position.coords.latitude; //得到纬度
    //coords是一个属性，其中包含对coordinates对象的一个引用
    var longitude = position.coords.longitude; //得到经度

    var div = document.getElementById("location");
    div.innerHTML = "You're at Latitude："+latitude+", Longtitude："+longitude;
}

这样子，不出意外的话打开浏览器显示的就会是当前所处的经纬度了。
还有一个需要注意的地方，Chrome浏览器获取地理位置是需要翻墙的；我最开始写完之后死活无法加载我的位置，盯着代码看了好久…

Gorzing

关注

5
点赞
踩
9

收藏

觉得还不错? 一键收藏
2
评论
JavaScript获取地理位置

众所周知（雾），浏览器确定你的位置的方法有以下四种：GPSIP address蜂窝电话Wi-Fi这里暂且不谈各种方式的优缺点，但很多小伙伴可能会疑惑:这么多方式，浏览器到底该采取哪种方式来确定我的位置呢？其实不必疑惑，浏览器会根据情况自行选择，通常顺序是：蜂窝电话 -> Wi-Fi或GPS.IP地址在城市中会更加精确虽然没有了解这些的必要，但多知道一点总没坏处。OK...
复制链接

扫一扫