我的-android
UYMBZ-GFZ3G-GZOQX-IPVIH-IMQTF-EAFKD
2.public/index.html
<script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=UYMBZ-GFZ3G-GZOQX-IPVIH-IMQTF-EAFKD"></script>
<script type="text/javascript" src="https://3gimg.qq.com/lightmap/components/geolocation/geolocation.min.js"></script>
3.使用的页面：
<template>
<div>
<div id="container"></div>
<div>
经：
<input type="text" ref="j" />
</div>
<div>
纬：
<input type="text" ref="w" />
</div>
<div>
缩放级别：
<input type="text" ref="z" />
</div>
</div>
</template>
script:
mounted(){
var qq = window.qq
var _this = this
var map = new qq.maps.Map(document.getElementById("container"), {
center: new qq.maps.LatLng(37.80789920419703, 112.56275080159814), // 地图的中心地理坐标
zoom: 18, // 地图缩放级别
mapStyleId: "style1" // 该key绑定的style1对应于经典地图样式，若未绑定将弹出无权限提示窗
})
var geolocation = new qq.maps.Geolocation(
"UYMBZ-GFZ3G-GZOQX-IPVIH-IMQTF-EAFKD", //ak,ak名
"我的-android"
)
geolocation.getLocation(showPosition, () =>{
console.log("获取位置失败，如果是PC，请设置模拟器，Sensors,more tools>more")
})
function showPosition(position) { //成功后的回调
console.log(position)
var lnglat = new qq.maps.LatLng(position.lat, position.lng)
map.setCenter(lnglat)//成功后根据经纬度设置中心点
map.setZoom(10)//设置缩放级别
var marker = new qq.maps.Marker({
//设置Marker的位置坐标
position: lnglat,
//设置显示Marker的地图
map: map
})
//设置Marker是否可以被拖拽，为true时可拖拽，false时不可拖拽，默认属性为false
marker.setDraggable(true)
//设置Marker停止拖动事件
qq.maps.event.addListener(marker, "dragend", function() {
var position = marker.getPosition()
var zoom = map.getZoom()
console.log(position, zoom)
_this.$refs.j.value = position.lng//分别把拖动后显示的位置赋值给经纬度，缩放级别
_this.$refs.w.value = position.lat
_this.$refs.z.value = zoom
//https://lbs.qq.com/javascript_v2/doc/geocoder.html
//地址和经纬度之间进行转换服务
var geocoder = new qq.maps.Geocoder()
//对指定经纬度进行解析
geocoder.getAddress(position)
//设置服务请求成功的回调函数
geocoder.setComplete(function(result) {
console.log(result.detail) //拖动停止后返回的详细地址
})
})
}
}
----------------------------------------------------------------
//只获取定位的情况下：
var qq = window.qq
var _this = this
var geolocation = new qq.maps.Geolocation(
"UYMBZ-GFZ3G-GZOQX-IPVIH-IMQTF-EAFKD", //ak,ak名
"我的-android"
)
geolocation.getLocation((position)=>{
_this.$refs.dw.innerHTML=position.city//成功时赋值
}, () =>{
console.log("获取位置失败，如果是PC，请设置模拟器，Sensors,more tools>more")
})
--------------------------------------------------------------------
<style scoped lang="scss">
#container {
min-width: 100%
min-height: 300px
}
</style>
遇到了同样的问题，腾讯地图的js地址解析只是解析到了门牌号，就忽略了后面的详细地址，可能出现极大偏差，中国很多地方的街道门牌号只是代表一块区域，并非特指某一个具体的大厦地址，已经提交工单到腾讯地图还没处理，这个问题得不到处理，估计很多使用到该功能的开发者会去寻找其他替代品了。使用百度地图的解析倒不会出现此问题，后期可能会转移到百度地图。
