在仿照开发一个电影网站前端功能的时候，突然发现了免费使用腾讯地图可以进行定位。整体思路是利用浏览器的geolocation功能拿到用户的经纬度信息，再把这个经纬度信息提交到腾讯接口去查询，即可返回对应的物理定位。当然，这个物理地址有些就相对精确，有些就差异有点达了。
这里复盘一下使用方，一个简单的应用：
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>定位访客位置</title>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.7.16/vue.min.js"></script>
</head>
<body>
<h1>定位</h1>
<div id="app">
<button @click="onClick">查询位置</button>
<div v-if="result">
<p v-if="result.address_component">
你的位置是：{{result.address_component.nation}}-{{result.address_component.province}}-{{result.address_component.city}}-{{result.address_component.district}}-{{result.address_component.street}}
</p>
<p v-if="result.address_reference">
街道：{{result.address_reference.town.title}}-地标：{{result.address_reference.landmark_l2.title}}
</p>
<p v-if="result.address_reference">路：{{result.address_reference.street.title}}</p>
<p v-if="result.formatted_addresses">
formatted_addresses:{{result.formatted_addresses.recommend}}-{{result.formatted_addresses.rough}}-{{result.formatted_addresses.standard_address}}
</p>
</div>
</div>
</body>
</html>
<script>
let app = new Vue({
el: '#app',
data: {
result: {},
},
methods: {
onClick() {
// 调用函数获取用户地址信息
fetchUserAddress()
},
},
})
async function getUserGeolocation() {
return new Promise((resolve, reject) => {
if ('geolocation' in navigator) {
navigator.geolocation.getCurrentPosition(
(position) => {
const { latitude, longitude } = position.coords
resolve({ latitude, longitude })
},
(error) => {
reject(new Error(`Error obtaining location: ${error.message}`))
},
)
} else {
reject(new Error('Geolocation is not supported by this browser.'))
}
})
}
async function getUserLocation() {
try {
return await getUserGeolocation()
} catch (error) {
console.error('获取位置失败:', error)
}
}
function fetchUserAddress() {
getUserLocation()
.then(({ latitude, longitude }) => {
const API_URL = `https://h5gw.map.qq.com/ws/geocoder/v1/?key=[你的key]&location=${latitude},${longitude}&apptag=lbs_geocoder&output=jsonp`
$.ajax({
url: API_URL,
dataType: 'jsonp', // 指定数据类型为 jsonp
jsonp: 'callback', // 默认参数名是 'callback'
success: function (data) {
// console.log('获取地址成功:', data)
const { message, result, status } = data
if (message === 'Success') {
app.result = result
console.log('获取地址成功:', app.result)
} else {
console.error('获取地址失败:', message)
}
},
error: function (jqXHR, textStatus, errorThrown) {
console.error('获取地址失败:', textStatus, errorThrown)
},
})
})
.catch((error) => {
console.error('获取位置或地址时出错:', error)
})
}
</script>注意代码那里的[你的key],没错就是这样的，可以根据这段代码拓展更详细使用方式。
