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属性。如果可用，则会返回其他下面表格的属性：

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

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地图开放平台等