168 lines
5.4 KiB
Vue
168 lines
5.4 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"
|
|
/>
|
|
</div>
|
|
<div id="mapContainer"></div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
let marker = null
|
|
let circle = null
|
|
module.exports = {
|
|
name: "mapContainer",
|
|
props: {
|
|
isCircle: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
radius: {
|
|
type: Number,
|
|
default: 50
|
|
},
|
|
position: {
|
|
type: Array,
|
|
default: () => {
|
|
return []
|
|
}
|
|
},
|
|
view: { type: Boolean, default: false }
|
|
},
|
|
data() {
|
|
return {
|
|
// 此处不声明 map 对象，可以直接使用 this.map赋值或者采用非响应式的普通对象来存储。
|
|
map: null,
|
|
poi: this.position,
|
|
appMapCenterPointX: 0,
|
|
appMapCenterPointY: 0,
|
|
addressValue: "",
|
|
placeSearchComponent: null
|
|
}
|
|
},
|
|
methods: {
|
|
handleSelect(item) {
|
|
if (item.location) {
|
|
// 定位到中心点
|
|
this.map.setCenter(item.location)
|
|
// TODO 获取数据，对数据进行操作如：添加marker等
|
|
this.clearMarker()
|
|
this.createMarker(item.location)
|
|
this.poi = [item.location.lng, item.location.lat]
|
|
}
|
|
},
|
|
querySearchAsync(queryString, cb) {
|
|
if (!queryString) {
|
|
return
|
|
}
|
|
this.placeSearchComponent.search(queryString, function (status, result) {
|
|
// 查询成功时，result即对应匹配的POI信息
|
|
if (status !== "error") {
|
|
result.poiList.pois.forEach((item) => {
|
|
item.value = item.name + "【详细地址：" + item.address + "】"
|
|
})
|
|
cb(result.poiList.pois)
|
|
}
|
|
})
|
|
},
|
|
initMap() {
|
|
this.map = new AMap.Map("mapContainer", {
|
|
// 设置地图容器id
|
|
resizeEnable: true,
|
|
zoom: 16, // 初始化地图级别
|
|
center: [this.appMapCenterPointX, this.appMapCenterPointY] // 初始化地图中心点位置
|
|
})
|
|
console.log(this.map)
|
|
this.placeSearchComponent = new AMap.PlaceSearch({
|
|
// city 指定搜索所在城市，支持传入格式有：城市名、citycode和adcode
|
|
city: ""
|
|
})
|
|
this.clearMarker()
|
|
if (this.poi && this.poi.length > 0) {
|
|
const coordinateArray = this.poi
|
|
this.createMarker(coordinateArray)
|
|
} else {
|
|
this.createMarker([this.appMapCenterPointX, this.appMapCenterPointY])
|
|
}
|
|
this.map.on("click", (e) => {
|
|
if (!this.view) {
|
|
this.clearMarker()
|
|
const position = [e.lnglat.getLng(), e.lnglat.getLat()]
|
|
this.createMarker(position)
|
|
this.poi = position
|
|
}
|
|
})
|
|
},
|
|
// 清楚签到点位
|
|
clearMarker() {
|
|
if (marker) {
|
|
this.map.remove(marker)
|
|
}
|
|
if (circle && this.isCircle) {
|
|
this.map.remove(circle)
|
|
}
|
|
},
|
|
// 创建签到点位
|
|
createMarker(position) {
|
|
if (this.isCircle) {
|
|
circle = new AMap.Circle({
|
|
center: new AMap.LngLat(position[0], position[1]), // 圆心位置
|
|
radius: this.radius, // 半径
|
|
strokeColor: "#F33", // 线颜色
|
|
strokeOpacity: 1, // 线透明度
|
|
strokeWeight: 1, // 线粗细度
|
|
fillColor: "#ee2200", // 填充颜色
|
|
fillOpacity: 0.35 // 填充透明度
|
|
})
|
|
this.map.add(circle)
|
|
this.getAddress(position)
|
|
this.map.setFitView()
|
|
}
|
|
marker = new AMap.Marker({
|
|
position: position,
|
|
offset: new AMap.Pixel(0, 0)
|
|
})
|
|
this.map.add(marker)
|
|
this.getAddress(position)
|
|
this.map.setFitView(null, false, [150, 60, 100, 60])
|
|
},
|
|
getAddress() {},
|
|
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>
|