大屏项目_高德地图动态展示锚点和锚点信息(3)

项目需求是通过select选择，请求后端数据后，展示锚点，并且鼠标悬停时展示锚点信息

1-首先在Map组件中遍历展示锚点

    <Map>
        {selectData.length > 0 && selectData?.map((item) => renderMarker(item, 'accident'))}
    </Map>
    
    // selectData是后端返回的数据源

    // 这里的type是根据不同情况下的条件筛选，如果只有一种情况，可以不加这个判读条件
    const renderMarker = (item, type) => {
        if (type === 'accident') {
          if (item.longitude && item.latitude) {
            return (
              <Marker
                className={styles.markerAccident}
                key={item.id}
                
                // 锚点相对偏移位置
                offset={{ x: -25, y: -55 }}
                
                // 锚点的位置应为返回的坐标点
                position={[item.longitude, item.latitude]}
                
                // 锚点事件，用于展示信息弹窗
                events={markerEvents(item, 'accident')}
              ></Marker>
            );
          }
          return null;
        }
        return '';
    };

2-通过锚点事件展示信息弹窗

     const markerEvents = (item, type) => {
        return {
        
          // 通过点击展示信息
          // click: () => {
          //   console.log(item, type);
          //   setCenter([item.jd, item.wd]);
          //   setInfoWindowData({
          //     ...item,
          //     type,
          //     position: {
          //       longitude: item.jd,
          //       latitude: item.wd,
          //     },
          //   });
          // },
          
          // 鼠标悬停展示信息
          mouseover: (e) => {
             
            // 是否鼠标悬停后移动中心点
            // setCenter([item.jd, item.wd]);
            
            // 设置锚点弹窗信息
            setInfoWindowData({
              ...item,
              type,
              position: {
                longitude: item.longitude,
                latitude: item.latitude,
              },
            });
          },
          mouseout: (e) => {
            setInfoWindowData({});
          },
        };
      };
    

弹窗信息展示，同样在Map组件内

    <InfoWindow
          className={styles.infoWindow}
          position={infoWindowData.position}
          visible={infoWindowData.position}
          offset={[0, -60]}
          autoMove
          isCustom
        >
          <div className={styles.head}>
            <span className={styles.text}>{infoWindowData.unit_name}</span>
            <span
              className={styles.close}
              onClick={() => {
                setInfoWindowData({});
              }}
            >
              <CloseOutlined />
            </span>
          </div>
          <div className={styles.body}>
            <span>所属街道：{infoWindowData.street_name}</span>
            {infoWindowData.type === 'accident' ? (
              <div>
                占用面积：{infoWindowData.quota_one_value}
                {infoWindowData.quota_one_name}
              </div>
            ) : null}
            <div>特色课程：{infoWindowData.village_name}</div>
          </div>```

              </div>

            ) : null}

            <div>特色课程：{infoWindowData.village_name}</div>

          </div>

        </InfoWindow>

```

项目需求是通过select选择，请求后端数据后，展示锚点，并且鼠标悬停时展示锚点信息

1-首先在Map组件中遍历展示锚点

    <Map>
        {selectData.length > 0 && selectData?.map((item) => renderMarker(item, 'accident'))}
    </Map>
    
    // selectData是后端返回的数据源

    // 这里的type是根据不同情况下的条件筛选，如果只有一种情况，可以不加这个判读条件
    const renderMarker = (item, type) => {
        if (type === 'accident') {
          if (item.longitude && item.latitude) {
            return (
              <Marker
                className={styles.markerAccident}
                key={item.id}
                
                // 锚点相对偏移位置
                offset={{ x: -25, y: -55 }}
                
                // 锚点的位置应为返回的坐标点
                position={[item.longitude, item.latitude]}
                
                // 锚点事件，用于展示信息弹窗
                events={markerEvents(item, 'accident')}
              ></Marker>
            );
          }
          return null;
        }
        return '';
    };

2-通过锚点事件展示信息弹窗

     const markerEvents = (item, type) => {
        return {
        
          // 通过点击展示信息
          // click: () => {
          //   console.log(item, type);
          //   setCenter([item.jd, item.wd]);
          //   setInfoWindowData({
          //     ...item,
          //     type,
          //     position: {
          //       longitude: item.jd,
          //       latitude: item.wd,
          //     },
          //   });
          // },
          
          // 鼠标悬停展示信息
          mouseover: (e) => {
             
            // 是否鼠标悬停后移动中心点
            // setCenter([item.jd, item.wd]);
            
            // 设置锚点弹窗信息
            setInfoWindowData({
              ...item,
              type,
              position: {
                longitude: item.longitude,
                latitude: item.latitude,
              },
            });
          },
          mouseout: (e) => {
          
            // 鼠标移出取消弹窗展示
            setInfoWindowData({});
          },
        };
      };
    

弹窗信息展示，同样在Map组件内

        <InfoWindow
          className={styles.infoWindow}
          position={infoWindowData.position}
          visible={infoWindowData.position}
          offset={[0, -60]}
          autoMove
          isCustom
        >
          <div className={styles.head}>
            <span className={styles.text}>{infoWindowData.unit_name}</span>
            <span
              className={styles.close}
              onClick={() => {
                 
                // 自定义弹窗右上角删除按钮，点击取消弹窗展示
                setInfoWindowData({});
              }}
            >
              <CloseOutlined />
            </span>
          </div>
          <div className={styles.body}>
            <span>所属街道：{infoWindowData.street_name}</span>
            {infoWindowData.type === 'accident' ? (
              <div>
                占用面积：{infoWindowData.quota_one_value}
                {infoWindowData.quota_one_name}
              </div>
            ) : null}
            <div>特色课程：{infoWindowData.village_name}</div>
          </div>
        </InfoWindow>