vue3 使用天地图添加/删除标注点

首先是添加标注点:

//预警添加图标
        let icon = new T.Icon({
            iconUrl: "https://voidtech.cn/i/2022/11/24/fj8s79.png",
            iconSize: new T.Point(30, 30),
            iconAnchor: new T.Point(10, 56),
        });
        // markers.length = checkedLng.value.length;
        //循环坐标数组,创建标记点
        let markers: any;
        yushuiTable.value.forEach((item: any, index: number) => {
            markers = new T.Marker(new T.LngLat(item[0], item[1]), {
                //item[0]是经度,item[1]是纬度
                icon: icon,
            });
            map.addOverLay(markers);
            markers.id = 'yuqingid'
            //执行标记点函数
            // addwindowclick(markers, index);
        });

其中 markers.id = '你的id名' 这一步是必须的,因为下一步删除标注需要用到。

删除就是根据我们所添加的id进行的

let newMarker = map.getOverlays(); // 获取到了地图上的所有点
    // console.log(newMarker, 'newMarker');
    for (let i = 0; i < newMarker.length; i++) {
        if (newMarker[i].id == 'yujingid') {
            map.removeOverLay(newMarker[i])
        } else if (newMarker[i].id == 'yuqingid') {
            map.removeOverLay(newMarker[i])
        }
    };

这样就可以实现天地图添加或者删除标记点啦

  • 1
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
1. 引入高德地图API 在vue3项目中,可以通过在index.html中引入高德地图API的方式来使用高德地图。在head标签中添加以下代码: ```html <script src="https://webapi.amap.com/maps?v=1.4.15&key=你的高德地图key"></script> ``` 其中,key为你在高德开放平台申请的地图应用的key。 2. 在组件中添加地图容器 在组件模板中添加一个div作为地图容器: ```html <template> <div id="map"></div> </template> ``` 3. 初始化地图 在组件中添加一个mounted生命周期钩子,在其中初始化地图: ```javascript mounted() { const map = new AMap.Map("map", { zoom: 13, //地图级别 center: [116.397428, 39.90923], //中心坐标 }); } ``` 其中,zoom为地图级别,center为地图中心的经纬度坐标。 4. 添加标记 在地图添加标记,可以通过AMap.Marker类来实现。在mounted生命周期钩子中添加以下代码: ```javascript const marker = new AMap.Marker({ position: [116.397428, 39.90923], //标记位置 title: "这是一个标记", //鼠标悬停时的提示信息 }); marker.setMap(map); //将标记添加地图中 ``` 其中,position为标记的经纬度坐标,title为鼠标悬停时显示的提示信息。 完整代码如下: ```html <template> <div id="map"></div> </template> <script> export default { mounted() { const map = new AMap.Map("map", { zoom: 13, center: [116.397428, 39.90923], }); const marker = new AMap.Marker({ position: [116.397428, 39.90923], title: "这是一个标记", }); marker.setMap(map); }, }; </script> ``` 运行项目后即可在地图上看到一个标记。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值