腾讯地图定位
This commit is contained in:
@@ -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
|
||||||
}
|
}
|
||||||
})
|
});
|
||||||
}
|
};
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|
||||||
|
|||||||
@@ -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": "/"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user