156 lines
4.5 KiB
Vue
156 lines
4.5 KiB
Vue
<template>
|
|
<div style="position: relative !important">
|
|
<div style="margin-bottom: 10px">
|
|
<el-autocomplete
|
|
v-model="addressValue"
|
|
style="width: 100%"
|
|
:fetch-suggestions="querySearchAsync"
|
|
placeholder="请输入关键词查询地址"
|
|
@select="handleSelect"
|
|
:trigger-on-focus="false"
|
|
/>
|
|
</div>
|
|
<div id="mapContainer"></div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
module.exports = {
|
|
name: "TMap",
|
|
props: {
|
|
radius: {
|
|
type: Number,
|
|
default: 50
|
|
},
|
|
position: {
|
|
type: Array,
|
|
default: () => {
|
|
return []
|
|
}
|
|
},
|
|
view: { type: Boolean, default: false }
|
|
},
|
|
data() {
|
|
return {
|
|
map: null,
|
|
poi: this.position,
|
|
appMapCenterPointX: 0,
|
|
appMapCenterPointY: 0,
|
|
markerLayer: null,
|
|
addressValue: '',
|
|
circle: null,
|
|
}
|
|
},
|
|
methods: {
|
|
handleSelect(item) {
|
|
if (item.location) {
|
|
// 定位到中心点
|
|
const center = new TMap.LatLng(item.location.lat, item.location.lng)
|
|
this.map.setCenter(center)
|
|
this.clearMarker()
|
|
this.createMarker(center)
|
|
this.poi = [item.location.lat, item.location.lng]
|
|
}
|
|
},
|
|
async querySearchAsync(queryString, cb) {
|
|
if (!queryString) {
|
|
return
|
|
}
|
|
const res = await this.$axios.post("/platform/TMap/suggestion", {
|
|
keyword: queryString,
|
|
})
|
|
if (res.code === 0 && res.data.status === 0) {
|
|
res.data.data.forEach((item) => {
|
|
item.value = item.title + "【详细地址：" + item.address + "】"
|
|
})
|
|
cb(res.data.data)
|
|
} else {
|
|
this.$message.error(res.msg)
|
|
cb([])
|
|
}
|
|
},
|
|
initMap() {
|
|
const center = new TMap.LatLng(this.appMapCenterPointY, this.appMapCenterPointX)
|
|
this.map = new TMap.Map('mapContainer', {
|
|
resizeEnable: true,
|
|
zoom: 16,
|
|
center: center
|
|
})
|
|
// 初始化
|
|
this.markerLayer = new TMap.MultiMarker({
|
|
map: this.map,
|
|
geometries: []
|
|
});
|
|
if (this.poi && this.poi.length > 0) {
|
|
const posi = new TMap.LatLng(this.poi[0], this.poi[1])
|
|
this.createMarker(posi)
|
|
this.map.setCenter(posi)
|
|
} else {
|
|
this.createMarker(center)
|
|
}
|
|
this.map.on("click", (event) => {
|
|
if (!this.view) {
|
|
this.clearMarker()
|
|
this.createMarker(event.latLng)
|
|
this.poi = [event.latLng.getLat(), event.latLng.getLng()]
|
|
}
|
|
})
|
|
},
|
|
// 清除签到点位
|
|
clearMarker() {
|
|
if (this.markerLayer) {
|
|
this.markerLayer.setGeometries([])
|
|
}
|
|
if(this.circle) {
|
|
this.circle.setGeometries([])
|
|
}
|
|
},
|
|
// 创建签到点位
|
|
createMarker(position) {
|
|
this.markerLayer.add([
|
|
{
|
|
id: 'marker_' + Date.now(),
|
|
position: position
|
|
}
|
|
]);
|
|
this.circle = new TMap.MultiCircle({
|
|
map: this.map,
|
|
geometries: [{
|
|
center: position,
|
|
radius: this.radius,
|
|
}],
|
|
});
|
|
},
|
|
async getConfigKey(key) {
|
|
const resp = await this.$axios.post("/open/common/getConfigKey", { key })
|
|
return resp.data
|
|
}
|
|
},
|
|
watch: {
|
|
position(newVal) {
|
|
this.poi = newVal
|
|
},
|
|
poi(newVal) {
|
|
this.$emit("update:position", newVal)
|
|
}
|
|
},
|
|
async mounted() {
|
|
// DOM初始化完成进行地图初始化
|
|
this.$nextTick(async () => {
|
|
this.appMapCenterPointX = await this.getConfigKey("AppMapCenterPointX")
|
|
this.appMapCenterPointY = await this.getConfigKey("AppMapCenterPointY")
|
|
this.initMap()
|
|
})
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
#mapContainer {
|
|
padding: 0;
|
|
margin: 0;
|
|
width: 100%;
|
|
height: 500px;
|
|
}
|
|
</style>
|