vue+腾讯地图展示锚点及数据填充自定义弹框

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

一、使用步骤

代码如下：

<template>
    <div class="app-container">
    //添加地图容器
    <div class="map" id="container"></div>
</div>
  </template>
   

2.填充数据

代码如下（示例）：

<script setup>
    import { nextTick, onMounted } from 'vue'
    import { queryEamByParam } from "@/api/eam/eam";

    const { proxy } = getCurrentInstance();
    const data = reactive({
        dataList: [],
        // 点聚合实例
        markerCluster: null,
        //中心的点
        center: null,
        //地图
        map: null,
        //信息窗口
        infoWindow: null,
        queryParams: {
            assetClassification: null,
            userDepartment: null,
            assetName: null,
        }
    });
    const { queryParams } = toRefs(data);
    onMounted(() => {
        nextTick(() => {

            console.log(data.markerCluster);
            //定义地图中心点坐标
            data.center = new TMap.LatLng(26.294274, 107.442953)
            //定义map变量，调用 TMap.Map() 构造函数创建地图
            data.map = new TMap.Map('container', {
                center: data.center,//设置地图中心点坐标
                zoom: 17.2,   //设置地图缩放级别
            });
            getList();
        })
    });
    //获取标记数据
    function getList() {
        queryEamByParam(queryParams.value).then(response => {
            data.dataList = response.data;
            console.log(data.dataList);
            hanleMarker();
        });
    }
    // 将坐标点处理为地图可以识别的坐标
    function hanleMarker() {
        //遍历数据，填充到地图信息弹窗，经纬度
        let list = data.dataList;
         //点数组
        const marks = [];
        for (let key = 0; key < list.length; key++) {
            //取到库里经纬度数据，截取经纬度
            let assigin = list[key].longitudeLatitude.split(',');
            //经度，纬度
            var latLng = new TMap.LatLng(Number(assigin[0]), Number(assigin[1]));
            //点数组赋值，（properties信息窗需要的数据）
            let obj = {
                position: latLng,
                properties: {
                    assetName: list[key].assetName,
                    assetClassification: list[key].assetClassification,
                    userDepartment: list[key].userDepartment,
                },
            }
            marks.push(obj);
        }
        let markerArr = marks;

        // 创建点聚合实例
        data.markerCluster = new TMap.MarkerCluster({
            id: "marker-layer",
            map: data.map,
            geometries: markerArr,
        });
        //监听点击事件添加marker
        data.markerCluster.on("click", (evt) => {
            let { lat, lng } = evt.cluster.geometries[0].position;
            let { assetName, assetClassification, userDepartment } = evt.cluster.geometries[0].properties;
            initWindow(lat, lng, assetName, assetClassification, userDepartment);
            data.infoWindow.open(); //打开信息窗
        });
    }

    // 初始化一个信息窗口
    function initWindow(lat, lng, assetName, assetClassification, userDepartment) {
        // 一次只能打开一个窗口 打开之前先关闭之前打开的
        if (data.infoWindow) {
            data.infoWindow.close();//初始关闭信息窗关闭
        }
        data.infoWindow = new TMap.InfoWindow({
            map: data.map,
            position: new TMap.LatLng(lat, lng),
            offset: { x: 0, y: -30 }, //设置信息窗相对position偏移像素
        });
        data.infoWindow.setContent('
'
            + '
'
            + '资产信息'
            + '
'
            + '
'
            + ' 
'
            + '
分类：' + assetClassification + '
'
            + '
使用部门：' + userDepartment + '
'
            + '
名称：' + assetName + '
'
            + '
'
            + '
'
            + '
'
        );//设置信息窗内容
    }


    //搜索
    //function handleQuery() {
        // 一次只能打开一个窗口 打开之前先关闭之前打开的
    //    if (data.infoWindow) {
    //        data.infoWindow.close();//初始关闭信息窗关闭
    //    }
    //    if (data.markerCluster != null) {
    //       data.markerCluster.destroy();
    //        getList();
    //    }
   // }

</script>
   
  <style lang='scss' scoped>
    .map{
      width: 100%;
      height: 100%;
    }
    .el-form-item {
   font-size: 18px;
    margin: 9px; 

    }
  </style>