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

高德地图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);