vue腾讯地图经纬度逆解析
程序员文章站
2022-06-11 20:37:37
...
申请自己的key 申请key
先写一个方法解析传进来的经纬度
analysis (data1) {
var data = {
location: data1.lat + ',' + data1.lng,
/* 换成自己申请的key */
key: '换成自己申请的key'
}
data.output = 'jsonp'
return new Promise((resolve, reject) => {
// eslint-disable-next-line no-undef
$.ajax({
type: 'get',
dataType: 'jsonp',
data: data,
jsonp: 'callback',
jsonpCallback: 'QQmap',
url: 'http://apis.map.qq.com/ws/geocoder/v1/?',
success: function (json) {
/* json对象转为文本 var aToStr=JSON.stringify(a); */
console.log(json.result)//这个就是返回的地址详细信息,下面我只取了一个地址名称
resolve(json.result.formatted_addresses.recommend)
},
// eslint-disable-next-line handle-callback-err
error: function (err) { alert('服务端错误,请刷新浏览器后重试') }
})
})
},
调用上面的方法获取地址,我这里是需要获取到地址之后才能进行下一步,所以我使用了async await
var thit = this // 为了保证作用域都相同
qq.maps.event.addListener(marker, 'mouseup', async function (e) {
// 获取经纬度 e.latLng
// 获取坐标 e.cursorPixel
// thih.analysis(e.latLng)
let name = await thit.analysis(e.latLng)
//name 就是上面函数返回的地址
console.log(name)
info.open()
info.setContent('<div style="text-align:center;white-space:nowrap;' + 'margin:10px;">地址:' + name + '</div>')
info.setPosition(e.latLng)
label1.setContent('上班')
label1.setPosition(e.latLng)
thih.dataTable.workon_latitude = e.latLng.lat
thih.dataTable.workon_longitude = e.latLng.lng
})