react-map-gl点击Marker弹出Popup失效报ERR_BLOCKED_BY_CLIENT错误

控制台events.mapbox.com相关报错说明 #

• net::ERR_BLOCKED_BY_CLIENT 报错是浏览器广告拦截插件（如AdBlock、uBlock Origin）拦截了Mapbox遥测事件上报请求导致的，该报错完全不影响地图核心功能，和点击标记无法弹出弹窗的问题没有关联。
• 直接访问events.v2接口返回{"message": "Not found"}属于正常现象，该接口仅接收Mapbox SDK内部发起的带特定校验参数的POST上报请求，不支持直接GET访问。
• 若要彻底消除该报错，只需在Map组件上添加telemetry={false}属性，关闭Mapbox默认开启的遥测上报即可。

点击标记不触发弹窗的核心原因 #

代码中Popup组件的放置层级错误：你将Popup写在了Marker组件内部，而Marker渲染的是自定义定位DOM元素，嵌套在内部的弹窗会被Marker的定位逻辑、DOM层级规则限制，无法正常展示、交互。
按照react-map-gl的设计规范，Popup属于和Marker平级的地图覆盖物，需要作为Map组件的直接子元素放置，不能嵌套在Marker内部。
另外现有代码的标记点击事件没有阻止冒泡，点击事件会透传到底层地图，可能触发非预期的地图移动、点击响应。

修复后可直接运行的代码 #

import * as React from 'react';
import Map, {Marker, Popup} from 'react-map-gl';
import pin from "./pin.png";
function App() {
  const [viewport,setViewport] = React.useState({
    longitude: -100,
    latitude: 40,
    zoom: 3.5,
  });
  const [showPopup, setShowPopup] = React.useState(false);
  return <Map
    mapboxAccessToken = {process.env.REACT_APP_MAPBOX_ACCESS_TOKEN}
    {...viewport}
    onMove={evt => setViewport(evt.viewport)}
    style={{width: '100vw',height: '100vh'}}
    mapStyle="mapbox://styles/mapbox/streets-v9"
    telemetry={false}
  >
    <Marker longitude={-100} latitude={40} anchor="bottom" >
      <img 
        src={pin} 
        onClick={(e) => {
          e.stopPropagation();
          setShowPopup(true);
        }} 
        style={{width:'24px',height:'24px', cursor: 'pointer'}} 
        alt="marker" 
      />
    </Marker>
    {showPopup && (
      <Popup 
        longitude={-100} 
        latitude={40}
        anchor="top"
        onClose={() => setShowPopup(false)}
      >
        You are here
      </Popup>
    )}
  </Map>;
}
export default App;

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