parent
3a7ebb4a06
commit
28387130e0
|
Before Width: | Height: | Size: 4.2 KiB |
|
Before Width: | Height: | Size: 5.5 KiB |
|
After Width: | Height: | Size: 1.9 KiB |
@ -0,0 +1,101 @@ |
||||
<template> |
||||
<div> |
||||
<div ref="mapContainer" style="height: 100%;"></div> |
||||
<el-button @click="cleanMap">清除</el-button> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import {debounce} from "@/utils"; |
||||
|
||||
export default { |
||||
name: 'Map', |
||||
props: { |
||||
mapCenter: { |
||||
type: Array, |
||||
default: () => [] |
||||
}, |
||||
pointArr: { |
||||
type: Array, |
||||
default: () => [] |
||||
}, |
||||
clean: { |
||||
type: Boolean, |
||||
default: true, |
||||
}, |
||||
}, |
||||
data() { |
||||
return { |
||||
defaultPoint: [114.56, 38.03], |
||||
map: null, |
||||
markers: [], |
||||
selectedMarker: null, // 存储当前选中的标记点 |
||||
arr: [] |
||||
} |
||||
}, |
||||
mounted() { |
||||
this.initMap(this.mapCenter) |
||||
}, |
||||
watch: { |
||||
pointArr: { |
||||
immediate: true, |
||||
deep: true, |
||||
handler(val) { |
||||
// this.markers = val |
||||
} |
||||
} |
||||
}, |
||||
methods: { |
||||
initMap(center) { |
||||
const map = new window.AMap.Map(this.$refs.mapContainer, { |
||||
center: center, |
||||
zoom: 13 |
||||
}) |
||||
this.map = map |
||||
this.addMarker(this.pointArr) |
||||
this.initEvents() |
||||
this.map.setFitView() |
||||
|
||||
}, |
||||
addMarker(position) { // 添加标记点 |
||||
debugger |
||||
if (position !== undefined && position.length <= 2 || Array.isArray(position)===false && Object.keys(position).length > 0) { |
||||
if (this.selectedMarker && this.clean === true) { |
||||
this.selectedMarker.setMap(null) |
||||
} // 清除上一个标记点 |
||||
const marker = new window.AMap.Marker({ |
||||
position |
||||
}) |
||||
marker.setMap(this.map) |
||||
this.markers.push(marker) |
||||
this.selectedMarker = marker // 更新当前选中的标记点 |
||||
} else { |
||||
position.forEach(item => { |
||||
const marker = new window.AMap.Marker({ |
||||
position: [item[0], item[1]] |
||||
}) |
||||
marker.setMap(this.map) |
||||
// this.selectedMarker = marker |
||||
this.markers.push(marker) |
||||
}) |
||||
|
||||
} |
||||
|
||||
}, |
||||
initEvents() { // 初始化事件监听器 |
||||
this.map.on('click', (e) => { |
||||
console.log(typeof (e.lnglat), '][][') |
||||
this.addMarker(e.lnglat) |
||||
this.$emit('markerAdded', e.lnglat) |
||||
}) |
||||
}, |
||||
cleanMap() { |
||||
console.log(this.markers, '000'); |
||||
this.map.remove(this.markers) |
||||
// this.addMarker(this.defaultPoint) |
||||
this.map.setZoom(11) |
||||
this.map.setFitView() |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
Loading…
Reference in new issue