Geolocation地理定位

Geolocation地理定位

使用地理定位

下例是一个地理定位实例，可返回用户位置的经度和纬度：

const success = res => {
	const { latitude, longitude } = res.coords
	console.log(`${longitude},${latitude}`)
}
if (navigator.geolocation) {
	navigator.geolocation.getCurrentPosition(success)
}

我们一步步剖析这段代码：

第一步：判断浏览器是否有geolocation对象：

if (navigator.geolocation) {}

第二步：调用geolocation的getCurrentPosition()方法：

navigator.geolocation.getCurrentPosition(success,err)

getCurrentPosition（）方法有两个参数：

• success：成功获取地理位置的回调函数
• err ：获取地理位置失败的回调函数

第三步：创建一个success回调函数：

const success = res => {
	const { latitude, longitude } = res.coords
	console.log(`${longitude},${latitude}`)
}

以上代码向控制台输出客户端的经纬度

getCurrentPosition()方法返回的数据

如果成功执行getCurrentPosition()，则该方法会在成功函数中的参数传入一个包含longitude（经度）、latitude（纬度）以及accuracy属性。如果可用，则会返回其他下面表格的属性：

属性	描述
coords.latitude	十进制数的纬度
coords.longitude	十进制数的经度
coords.accuracy	位置精度
coords.altitude	海拔，海平面以上以米计
coords.altitudeAccuracy	位置的海拔精度
coords.heading	方向，从正北开始以度计
coords.speed	速度，以米/每秒计
timestamp	响应的日期/时间

若执行失败，则会在失败的回调函数中的参数传入错误信息的字符串，可能出现以下任意一个错误代码：

错误代码	描述
Permission denied	用户不允许地理定位
Position unavailable	无法获取当前位置
Timeout	操作超时
Unknown	未知错误

watchPosition持续监听用户地理位置

watchPosition() - 返回用户的当前位置，并继续返回用户移动时的更新位置（就像汽车上的 GPS）。

clearWatch() - 停止 watchPosition() 方法

下面的例子展示 watchPosition() 方法。您需要一台精确的 GPS 设备来测试该例（比如 iPhone）：

var view=document.getElementById("view");
function getLocation(){
    if (navigator.geolocation){
        navigator.geolocation.watchPosition(showPosition);
    }else{
        view.innerHTML="该浏览器不支持获取地理位置。";
    }
}
function showPosition(position){
    view.innerHTML="纬度: " + position.coords.latitude + "，经度: " + position.coords.longitude; 
}

利用百度地图开放平台的接口返回静态地图

可以利用第三方平台提供的接口获取当前位置的静态地图，下面是一个利用百度地图开放平台提供的接口获取客户端地理位置的静态地图的实例：

<img id="map">
<script>
    const map = document.getElementById('map')
    const success = res => {
        // 百度地图开放平台提供的接口地址
        const url = 'http://api.map.baidu.com/staticimage/v2'
        // 申请的密匙,建议自己注册申请一个
        const ak = 'wVGFYXm9ij7UCqEbW7CT1BFrOQYh6oXM'
        // 解构当前地理的经纬度
        const { latitude, longitude } = res.coords
        // 接口的地理位置参数
        const center = `${longitude},${latitude}`
        // 拼接接口地址和所需参数,该接口会根据center提供的经纬度返回静态地图
        const interFace = `${url}?ak=${ak}&center=${center}`
        // 给id为map的元素设置src路径
        map.setAttribute('src', interFace)
    }
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(success)
    }
</script>

可用的第三方地图开放平台有腾讯地图开放平台、百度地图开放平台、高德地图开放平台、Google地图开放平台等