腾讯地图基本使用(撒点位,点位点击,弹框等...功能) 搭配Vue3

腾讯地图的基础注册账号 展示地图等基础功能在专栏的上一篇内容 大家有兴趣可以去看一看

今天说的是腾讯地图的在稍微一点的基础操作 话不多说 直接上代码

var marker = ref(null)
var map 
var center = ref(null)
// 地图初始化
const initMap = () => {
    //定义地图中心点坐标     
     center.value = new TMap.LatLng(30.589184, 114.29689)
    //定义map变量，调用 TMap.Map() 构造函数创建地图
 
     map = new TMap.Map(document.getElementById('container'), {
        center: center.value,//设置地图中心点坐标
        zoom: 6,   //设置地图缩放级别
        mapStyleId: 'style1', //设置地图样式
    });
 
 
    //创建并初始化MultiMarker
     marker = new TMap.MultiMarker({
        map: map,  //指定地图容器
        //样式定义
        styles: {
            //创建一个styleId为"myStyle"的样式（styles的子属性名即为styleId）
            //将不同的作物指定为不同的样式
            myStyleOne: new TMap.MarkerStyle({
               "width": 25,
                "height": 35,
                 "src": markImgOne,
                "anchor": { x: 16, y: 32 }
            }),
            myStyleTwo: new TMap.MarkerStyle({
                "width": 25,
                "height": 35,
                "src": markImgTwo,
                "anchor": { x: 16, y: 32 }
            }),
            myStyleThere: new TMap.MarkerStyle({
                "width": 25,
                "height": 35,
                "src": markImgThere,
                "anchor": { x: 16, y: 32 }
            }),
        },
        //点标记数据数组
        geometries: convertedPoints.value
     });
    console.log('坐标数据',convertedPoints.value);
    //初始化infoWindow
    var infoWindow = new TMap.InfoWindow({
        map: map,
        position: new TMap.LatLng(39.984104, 116.307503),
        offset: { x: 0, y: -32 } //设置信息窗相对position偏移像素，为了使其显示在Marker的上方
    });
    infoWindow.close();//初始关闭信息窗关闭
    //监听标注点击事件
    marker.on("click", function (evt) {
        if (iconClidk.value == true) {
            // console.log(evt, '点位点击信息');
            projectInfo.value = { id: '3', name: '湖北省公租房管理第三方评价项目 ·' + evt.geometry.properties.title, sonTask: evt.geometry.properties.num, problem: '1', headName: '王五', phone: "18337391968", }
        }
        //设置infoWindow
        // infoWindow.open(); //打开信息窗
        // infoWindow.setPosition(evt.geometry.position);//设置信息窗位置
        // //将信息与标记点关联起来
        // infoWindow.setContent(evt.geometry.properties.title);//设置信息窗内容
        // console.log(evt)
    })
    //移除控件缩放
    map.removeControl(TMap.constants.DEFAULT_CONTROL_ID.ZOOM);
    // 移除比例尺控件
    map.removeControl(TMap.constants.DEFAULT_CONTROL_ID.SCALE);
    // 移除旋转控件
    map.removeControl(TMap.constants.DEFAULT_CONTROL_ID.ROTATION);
 
}

这个大家看起来都没有难度)(包含点位点击和弹框)  重要的是撒点位时的数据处理 和 图标类别的区分显示

这是后后端返回的数据 现在处理成想要的格式 

const getLocationAndStatusFn = () => {
     let params = { projectId: projectId.value }
    getLocationAndStatus(params).then(res => {
        console.log(res, '获取各位置及状态');  
        if (res.code == 200 && res.data.length > 0) {
            console.log(res,'点位信息');
            positionArr.value = res.data
//点位数据
            convertedPoints.value =  positionArr.value.map(item => {
                const [longitude, latitude] = item.position[0].split(',');
                // 设置已超时 已完成 进行中图标样式
                if (item.isOvertime == false) {
                    if (item.status == '0' || item.status == '1' || item.status == '2' || item.status == '3') {
                        styleIdValue.value = 'myStyleTwo'; // 根据status值设置样式
                    } else if (item.status == '4' || item.status == '5') {
                        styleIdValue.value = 'myStyleOne'; // 根据status值设置样式
                    }
                } else { 
                    styleIdValue.value = 'myStyleThere';
                }
         
                // if(item.)
                return {
                    id: item.district_id,
                    styleId: styleIdValue.value,  //这个用来区分显示不同的图标
                    position: new TMap.LatLng(parseFloat(latitude), parseFloat(longitude)),
                    properties: {  //附带信息
                        title: item.name,
                        address: item.district,
                        taskId: item.taskId,
                        status: item.status
                    }
                };
            });
        }
    })
}

 最后处理完格式是这样的

处理完数据 大家可以看到我在第一张代码里定义了3中样式的图片 当时我刚写的时候 图片死活出不来 只会显示腾讯地图的默认的红色图标 最后找到解决办法

// 地图点位图标
import markImgOne from '@/assets/visualization/icon/01.png';
import markImgTwo from '@/assets/visualization/icon/02.png';
import markImgThere from '@/assets/visualization/icon/03.png';

你的点位图片要先引入才能使用 

最后是设置中心点方法 

//设置中心点城市
function setCenter(lat, lng, xiaoqu) {
    map.setCenter(new TMap.LatLng(lat, lng))
    if (xiaoqu == 1) {
//这个是设置地图的缩放层级
        map.easeTo({ zoom: 12 }, { duration: 2000 })
    } else if (xiaoqu == 0) {
        map.easeTo({ zoom: 7 }, { duration: 2000 })
    } else { 
          map.easeTo({ zoom: 17 }, { duration: 2000 })
    }
}

最后看一下效果图