1.ak名,ak
我的-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>
