Vue3实现定位

利用浏览器内置 API

要实现定位可以利用浏览器提供的地理位置 API navigator.geolocation。

快速实现

if (!navigator.geolocation) {
    error.value = "Geolocation is not supported by your browser"
    return
}
navigator.geolocation.getCurrentPosition(
    (pos) => {
        // 一个包含位置信息的对象
        position.value = {
            latitude: pos.coords.latitude, // 纬度
            longitude: pos.coords.longitude, // 经度
        }
    },
    (err) => {
        console.warn(`定位失败: ${err}`)
    },
    {
        enableHighAccuracy: true, // 是否启用高精度模式
        timeout: 10000, // 超时时间
        maximumAge: 0, // 缓存时间 设置为0表示实时定位
    }
)

navigator.geolocation.getCurrentPosition 的三个参数分别是成功回调、失败回调和配置项。

以上代码修改后放到函数中，调用即可。

利用 IP 实现

基于 IP 的地理定位通过分析用户的 IP 地址来估算其大致位置，无需用户授权，但是精确度较低。

原理是通过 IP 地址查询地理位置，需要使用第三方服务，如 ip-api.com。

使用第三方封装库

使用 webview 原生定位

if (window.Android && window.Android.getLocation) {
    window.Android.getLocation()
} else if (window.webkit && window.webkit.messageHandlers && window.webkit.messageHandlers.getLocation) {
    window.webkit.messageHandlers.getLocation.postMessage(null)
} else if {
    // 上面使用浏览器内置 API 定位
} else {
    error.value = "无法获取定位"
}

// 定义供原生调用的全局函数
window.updateLocation = (lat, lon) => {
    loading.value = false
    position.value = { lat, lon }
}

window.handleLocationError = (msg) => {
    loading.value = false
    error.value = msg
}