腾讯地图定位

This commit is contained in:
zxy
2024-02-04 22:34:37 +08:00
parent 966439f8d6
commit ca50d9cab0
3 changed files with 50 additions and 51 deletions

View File

@@ -1,25 +1,25 @@
import request from '@/router/axios';
import request from "@/router/axios";
/*逆地址解析*/
export const getcoder = (location, key, get_poi) => {
return request({
url: '/api/map/ws/geocoder/v1',
method: 'get',
url: "/qq/map/ws/geocoder/v1",
method: "get",
params: {
location,
key,
get_poi
}
})
}
});
};
/*关键词输入提示*/
export const querySearch = (keyword, key) => {
return request({
url: '/api/map/ws/place/v1/suggestion',
method: 'get',
url: "/qq/map/ws/place/v1/suggestion",
method: "get",
params: {
keyword,
key
}
})
}
});
};

View File

@@ -10,7 +10,7 @@
clearable="false"
@select="handleSelect"
:disabled="!isCanEdit"
v-show="type!=='view'"
v-show="type !== 'view'"
@input="addressChangeHandle"
>
<template slot-scope="{ item }">
@@ -33,43 +33,42 @@ export default {
props: {
lat: {
type: "string",
default: 23.1315381,
default: 23.1315381
},
lng: {
type: "string",
default: 113.3324436,
default: 113.3324436
},
address: String,
isCanEdit: Boolean,
type: {
type: "string",
default: "",
},
default: ""
}
},
data () {
data() {
return {
map: "", // 地图实例
mk: "", // Marker实例
map2: "", // 地图实例
mk2: "", // Marker实例,
addressLocation: this.address,
key: "FW3BZ-6JTK6-GCUS5-MZCRR-3GPR5-HJFEI",
addressTip: [],
key: "MTCBZ-WAAWC-H3M22-AL6XI-G4XN6-YZFK5",
addressTip: []
};
},
mounted () {
mounted() {
this.initMap();
},
watch: {},
methods: {
addressChangeHandle(val){
if(val == ""){
this.$emit('addressDel',"删除了地址数据")
addressChangeHandle(val) {
if (val == "") {
this.$emit("addressDel", "删除了地址数据");
}
},
// 初始化地图
initMap () {
initMap() {
var that = this;
if (this.isCanEdit) {
@@ -82,20 +81,20 @@ export default {
zoomControl: true,
//地图缩放控件参数
zoomControlOptions: {
position: qq.maps.ControlPosition.TOP_LEFT,
position: qq.maps.ControlPosition.TOP_LEFT
},
//地图比例尺控件若为false则不显示比例尺控件
scaleControl: false,
scaleControl: false
});
// 3、设置图像标注并绑定拖拽标注结束后事件
this.mk = new qq.maps.Marker({
position: point,
draggable: true,
map: that.map,
map: that.map
});
// 绑定拖拽标注结束后事件
qq.maps.event.addListener(this.mk, "dragend", function (e) {
qq.maps.event.addListener(this.mk, "dragend", function(e) {
that.getAddrByPoint(e.latLng);
});
//6、浏览器定位
@@ -103,7 +102,7 @@ export default {
this.geolocation();
}
// 7、绑定点击地图任意点事件
qq.maps.event.addListener(this.map, "click", function (e) {
qq.maps.event.addListener(this.map, "click", function(e) {
that.getAddrByPoint(e.latLng);
});
} else {
@@ -114,59 +113,59 @@ export default {
zoom: 19,
//地图缩放控件参数
zoomControlOptions: {
position: qq.maps.ControlPosition.TOP_LEFT,
position: qq.maps.ControlPosition.TOP_LEFT
},
//地图比例尺控件若为false则不显示比例尺控件
scaleControl: false,
scaleControl: false
});
// 2、设置图像标注并绑定拖拽标注结束后事件
this.mk2 = new qq.maps.Marker({
position: point2,
draggable: false,
map: that.map2,
map: that.map2
});
}
},
// 浏览器定位函数
geolocation () {
geolocation() {
var that = this;
var geolocation = new qq.maps.Geolocation(
"FW3BZ-6JTK6-GCUS5-MZCRR-3GPR5-HJFEI",
"jobslink 企业"
"MTCBZ-WAAWC-H3M22-AL6XI-G4XN6-YZFK5",
"后台管理"
);
geolocation.getLocation(this.showPosition, this.showErr, {
timeout: 20000,
failTipFlag: true,
failTipFlag: true
});
},
showPosition (position) {
showPosition(position) {
this.getAddrByPoint({
lat: position.lat,
lng: position.lng,
lng: position.lng
});
},
showErr () {
showErr() {
console.log("定位失败!");
},
// // 2、逆地址解析函数
getAddrByPoint (point) {
getAddrByPoint(point) {
var currentPoint = new qq.maps.LatLng(point.lat, point.lng);
var that = this;
var location = point.lat + "," + point.lng;
getcoder(location, encodeURI(this.key), 0).then((res) => {
getcoder(location, encodeURI(this.key), 0).then(res => {
that.mk.setPosition(currentPoint);
that.map.panTo(currentPoint);
let obj = {
address: res.data.result.address,
lng: point.lng,
lat: point.lat,
lat: point.lat
};
that.addressLocation = obj.address
that.addressLocation = obj.address;
that.$emit("addAddress", obj);
});
},
async querySearchAsync (queryString, cb) {
await querySearch(queryString, encodeURI(this.key)).then((res) => {
async querySearchAsync(queryString, cb) {
await querySearch(queryString, encodeURI(this.key)).then(res => {
if (res.data.status === 0) {
this.addressTip = res.data.data;
}
@@ -179,7 +178,7 @@ export default {
}, 1000 * Math.random());
},
// 8-2、选择地址
handleSelect (item) {
handleSelect(item) {
this.addressLocation = item.address;
var point = new qq.maps.LatLng(item.location.lat, item.location.lng);
this.mk.setPosition(point);
@@ -188,11 +187,11 @@ export default {
title: item.title,
address: item.address,
lng: item.location.lng,
lat: item.location.lat,
lat: item.location.lat
};
this.$emit("addAddress", obj);
},
},
}
}
};
</script>

View File

@@ -31,12 +31,12 @@ module.exports = {
"^/api": "/"
}
},
"/api/map": {
"/qq/map": {
//本地服务接口地址
target: "http://apis.map.qq.com",
target: "https://apis.map.qq.com",
ws: true,
pathRewrite: {
"^/api/map": "/"
"^/qq/map": "/"
}
}
}