Hey there! Let's break down what's causing that error and fix your clickable area color-filling goal.

首先，分析错误原因 #

那个报错 "a constructor, method, accessor or property was expected" 几乎肯定和你代码的放置位置有关。从你的<img src={marina}>能看出来你在用React（或类似JSX框架），如果是在类组件里直接写var myElement = document.getElementById("map1");这种变量声明语句，那肯定会报错——类的主体只能包含构造函数、方法、访问器或者属性定义，不能直接执行这种顶层变量赋值。

另外，还有个潜在问题：就算语法对了，如果你在DOM元素还没渲染完成时就调用document.getElementById，也会拿不到目标元素，后续操作自然失效。

解决方案分两种情况 #

如果你用的是React类组件 #

把DOM操作放到componentDidMount生命周期方法里，这个方法会在组件完全渲染、DOM元素都存在后执行：

class MarinaMap extends React.Component {
  componentDidMount() {
    // 现在能正常拿到area元素了
    const mapArea = document.getElementById("map1");
    
    // 注意：<area>标签本身是透明的，不能直接设置背景色，后面会说怎么解决这个
    mapArea.addEventListener('click', () => {
      console.log("Clicked map area!", mapArea.id);
    });
  }

  render() {
    return (
      <>
        <img src={marina} alt="marina map" usemap="#workmap" />
        <map name="workmap">
          <area 
            shape="rect" 
            coords="320,220,340,210" 
            alt="parking" 
            href="" 
            id="map1"
          />
        </map>
      </>
    );
  }
}

如果你用的是React函数组件 #

用useEffect钩子来模拟类组件的componentDidMount效果，确保只在组件挂载完成后执行DOM操作：

import { useEffect } from 'react';

function MarinaMap() {
  useEffect(() => {
    const mapArea = document.getElementById("map1");
    
    const handleAreaClick = () => {
      console.log("Clicked area with ID:", mapArea.id);
      // 这里添加颜色填充逻辑
    };

    mapArea.addEventListener('click', handleAreaClick);
    // 组件卸载时移除事件监听，避免内存泄漏
    return () => mapArea.removeEventListener('click', handleAreaClick);
  }, []); // 空依赖数组确保只执行一次

  return (
    <>
      <img src={marina} alt="marina map" usemap="#workmap" />
      <map name="workmap">
        <area 
          shape="rect" 
          coords="320,220,340,210" 
          alt="parking" 
          href="" 
          id="map1"
        />
      </map>
    </>
  );
}

关键补充：给area区域添加颜色的正确方式 #

<area>标签是透明的热点区域，浏览器不会渲染它的可见样式，所以直接设置它的background-color没用。你需要用叠加元素的方式实现高亮效果：

import { useEffect, useRef } from 'react';

function MarinaMap() {
  const highlightRef = useRef(null);

  useEffect(() => {
    const mapArea = document.getElementById("map1");
    
    const handleAreaClick = () => {
      // 点击后给叠加的div设置半透明背景色
      highlightRef.current.style.backgroundColor = 'rgba(255, 99, 71, 0.5)';
    };

    mapArea.addEventListener('click', handleAreaClick);
    return () => mapArea.removeEventListener('click', handleAreaClick);
  }, []);

  // 从area的coords计算尺寸和位置：x1=320, y1=210, width=340-320=20, height=220-210=10
  return (
    <div style={{ position: 'relative', display: 'inline-block' }}>
      <img src={marina} alt="marina map" usemap="#workmap" />
      <map name="workmap">
        <area 
          shape="rect" 
          coords="320,220,340,210" 
          alt="parking" 
          href="" 
          id="map1"
        />
      </map>
      {/* 叠加在img上的高亮div */}
      <div
        ref={highlightRef}
        style={{
          position: 'absolute',
          left: '320px',
          top: '210px',
          width: '20px',
          height: '10px',
          backgroundColor: 'transparent',
          pointerEvents: 'none' // 不遮挡area的点击事件
        }}
      />
    </div>
  );
}

这样点击area区域后，叠加的div就会显示颜色，达到你想要的效果啦！

内容的提问来源于stack exchange，提问作者KostasV