高德地图JS给覆盖物增加鼠标事件及信息弹窗

最新推荐文章于 2023-09-08 16:04:54 发布

神探小白牙

最新推荐文章于 2023-09-08 16:04:54 发布

阅读量3.1k

点赞数 5

分类专栏：高德地图文章标签： vue

本文链接：https://blog.csdn.net/anny_mei/article/details/120061839

版权

高德地图专栏收录该内容

10 篇文章 0 订阅

订阅专栏

该博客介绍了如何使用高德地图JavaScript API为覆盖物添加鼠标移入和移出事件。当鼠标移入河流覆盖物时，边框颜色变化，并显示信息弹窗展示河流名称；鼠标移出时，覆盖物恢复原始样式，信息弹窗关闭。通过这种方式增强了地图交互体验。

摘要由CSDN通过智能技术生成

高德地图JS给覆盖物增加鼠标事件,鼠标移入时添加信息弹窗,鼠标移出时关闭信息弹窗

效果图
在这里插入图片描述

            let maps = new AMap.Map('container', {
              resizeEnable: true,
            });

            //绘制面对象,被选中的河流的对象
            const polygon = new AMap.Polygon({
              map: map,
              path: path,
              strokeColor: '#34B289', // 描绘河流的边框的颜色
              strokeWeight: 1, // 描边的宽度
              strokeOpacity: 0.8, // 描边的透明度
              fillOpacity: 0.8, // 覆盖物的透明度
              fillColor: '#34B289', //被选中的河流的颜色
              zIndex: 50,
              // bubble: false,
            });
            // 设置弹窗
            let content = ["<div class='info_box_contant'> " + vo.aname + ' </div>'];
            const infoWindow = new AMap.InfoWindow({
              isCustom: true, //使用自定义窗体
              content: content.join('<br>'),
              offset: new AMap.Pixel(-15, -25),
            });
            //  给覆盖物增加鼠标移入事件
            polygon.on('mouseover', (e) => {
              // 点击之后覆盖物的样式
              polygon.setOptions({
                map: map,
                path: path,
                strokeColor: '#ACFDE2 ', // 描绘河流的边框的颜色
                strokeWeight: 3, // 描边的宽度
                strokeOpacity: 1, // 描边的透明度
                fillOpacity: 0.6, // 覆盖物的透明度
                fillColor: '#ACFDE2', //被选中的河流的颜色
                zIndex: 50,
              });

              infoWindow.open(map, [e.lnglat.lng, e.lnglat.lat]); //后面的参数指的是经纬度，在此显示窗口
            });
           //  鼠标移出事件
            polygon.on('mouseout', () => {
              // 鼠标移开覆盖物之后覆盖物的样式
              polygon.setOptions({
                map: map,
                path: path,
                strokeColor: '#34B289 ', // 描绘河流的边框的颜色
                strokeWeight: 1, // 描边的宽度
                strokeOpacity: 0.8, // 描边的透明度
                fillOpacity: 0.8, // 覆盖物的透明度
                fillColor: '#34B289', //被选中的河流的颜色
                zIndex: 50,
              });
              // 关闭信息窗体
              infoWindow.close();
            });

            //将绘制的面对象添加到地图上
            map.add(polygon);