腾讯地图定位

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) => { export const getcoder = (location, key, get_poi) => {
return request({ return request({
url: '/api/map/ws/geocoder/v1', url: "/qq/map/ws/geocoder/v1",
method: 'get', method: "get",
params: { params: {
location, location,
key, key,
get_poi get_poi
} }
}) });
} };
/*关键词输入提示*/ /*关键词输入提示*/
export const querySearch = (keyword, key) => { export const querySearch = (keyword, key) => {
return request({ return request({
url: '/api/map/ws/place/v1/suggestion', url: "/qq/map/ws/place/v1/suggestion",
method: 'get', method: "get",
params: { params: {
keyword, keyword,
key key
} }
}) });
} };

View File

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

View File

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