1
今天工作有个需求，左侧是多选框，选择之后在高德地图上展示多个标记点建筑，但是在网上找了好久也没个答案。自己搞了好久 算是解决了。
大概的功能就是坐标点击之后，右边的标记点也跟着展示和消除。但是官方的方法和代码都不太好理解
因为涉及公司业务，打个码
具体的逻辑我是
其中： positions: [],
// 存储所有标记实例
markers: [] 储存两个实例。通过eltree进行选择值，cekCheckChange方法可以监听 选中的值， checked的true和false进行不同数组的判断。
原理就是
选中的时候 this.positions.push([data.lng, data.lat]); 来战术数组中的点，当点击取消的时候，值没了，高德中的标记就没了。不通过 map.remove 进行删除点，
就分享到这。底下代码，告辞
<template>
<div class="app-container" style="height: calc(100vh - 84px);">
<div style="padding: 10px;box-sizing: border-box;position: relative;">
<div style="position: absolute;top: 0;left: 0;width: 19%;height: calc(100vh - 114px); overflow: auto;">
<div style="font-size: 16px;text-align: left;text-indent: 1em;width:100%;color: #ffffff;">站点列表</div>
<hr>
<el-tree
ref="tree"
:props="props"
:load="loadNode"
lazy
show-checkbox
default-expand-all
@check-change="cekCheckChange"
>
</el-tree>
</div>
<div style="position: absolute;top: 0;left: 20%;width: 80%;height: calc(100vh - 114px); overflow: auto;">
<div id="container" ref="map" style="width: 100%;height: 100%;"></div>
</div>
</div>
</div>
</template>
<script>
import AMapLoader from "@amap/amap-jsapi-loader";
import { allHrz } from "@/api/dkny/hrz";
import grz from "@/assets/images/grz.png";
export default {
name: "zddt",
data() {
return {
// 地圖
map: null,
props: {
label: 'name',
children: 'children',
},
// 站点热表表格数据
hrzList: [],
positions: [],
// 存储所有标记实例
markers: []
};
},
created() {
this.initMap();
},
beforeUnmount() {
this.map?.destroy();
},
methods: {
/** 查询站点热表列表 */
loadNode(node, resolve) {
if (node.level === 0) {
return resolve([{ id: 0, name: "智慧供热" }]);
}
if (node.level > 1) {
return resolve([])
}
allHrz({}).then(response => {
this.hrzList = response.data;
return resolve(this.hrzList);
});
},
cekCheckChange(data, checked, indeterminate){
if(checked){
if(data.lng != null && data.lat != null){
let marker = new AMap.Marker({
position: [data.lng, data.lat],
icon: new AMap.Icon({
image: grz, // 设置图标的图片URL
anchor: new AMap.Pixel(25, 25), // 设置图标锚点位置在图片中心
imageSize: new AMap.Size(20, 20) // 图片的实际尺寸
}),
anchor:'bottom-center',
offset: new AMap.Pixel(0, 0)
});
marker.setLabel({
direction:'top',
offset: new AMap.Pixel(0, 0), //设置文本标注偏移量
content: "<div class='info'>"+data.name+"</div>", //设置文本标注内容
});
marker.setMap(this.map);
this.markers.push(marker);
this.positions.push([data.lng, data.lat]);
}
}else{
// 取消勾选操作：移除标记
const index = this.positions.findIndex(pos =>
pos[0] === data.lng && pos[1] === data.lat
);
if (index > -1) {
// 从地图移除标记
this.markers[index].setMap(null);
// 删除数组元素
this.markers.splice(index, 1);
this.positions.splice(index, 1);
}
}
},
handleCheckChange(data, checked, indeterminate ) {
const checkedNodes = this.$refs.tree.getCheckedNodes();
// console.log(checkedNodes,'=== 获取所有已选中的节点');
console.log(data,'data===', checked, indeterminate );
if(data.lng != null && data.lat != null) {
let marker = new AMap.Marker({
position: [hrz.lng, hrz.lat],
icon: new AMap.Icon({
image: grz, // 设置图标的图片URL
anchor: new AMap.Pixel(25, 25), // 设置图标锚点位置在图片中心
imageSize: new AMap.Size(20, 20) // 图片的实际尺寸
}),
anchor:'bottom-center',
offset: new AMap.Pixel(0, 0)
});
marker.setLabel({
direction:'top',
offset: new AMap.Pixel(0, 0), //设置文本标注偏移量
content: "<div class='info'>"+data.name+"</div>", //设置文本标注内容
});
}
},
initMap() {
this.$nextTick(()=>{
window._AMapSecurityConfig = {
securityJsCode: "e4e5682ffd80b86acab2950ec1a2cf99",
};
AMapLoader.load({
key: "ce100703a674e9e8d24d213323c89d1e", // 申请好的Web端开发者Key，首次调用 load 时必填
version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
plugins: ["AMap.Scale","AMap.ToolBar"], //需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['...','...']
Loca: { // 是否加载 Loca， 缺省不加载
version: '2.0.0' // Loca 版本，缺省 1.3.2
},
}).then((AMap) => {
this.map = new AMap.Map("container", {
viewMode: '3D',
zoom: 12,
center: [112.988805, 36.107567],
showLabel: true,
terrain: true, //开启地形图
mapStyle: 'amap://styles/grey',
pitch: 50,
});
});
});
}
}
}
</script>
<style lang="scss" scoped>
.info {
font-size: 12px;
}
::v-deep .el-tree {
background-color: rgba(45, 78, 133, 0.8) !important;
}
::v-deep .el-tree-node__content:hover {
background: #4E82E4 !important;
color: #fff !important;
}
::v-deep {
/* 当前选中节点样式 */
.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
background-color: #4E82E4 !important;
color: #fff !important;
}
/* 覆盖默认的焦点状态 */
.el-tree-node:focus > .el-tree-node__content {
background-color: #4E82E4 !important;
color: #fff !important;
}
/* 节点基础样式 */
.el-tree-node__content {
background-color: rgba(45, 78, 133, 0.8);
color: #fff;
transition: all 0.3s ease;
&:hover {
background: #4E82E4 !important;
}
}
}
</style>
