ReactMapGL(Mapbox)拖拽事件失效：无法移动地图、缩放及显示内容

1. 拖拽/缩放失效：事件名拼写错误 #

你把事件名写成了onViewPortChange，正确的事件名是onViewportChange（注意Viewport的第二个P为小写）。拼写错误导致视口更新逻辑未触发，地图无法响应拖拽和缩放：

// 错误写法
onViewPortChange={viewport => {setViewport(viewport)}}

// 正确写法
onViewportChange={newViewport => setViewport(newViewport)}

2. 地图内文本“INFOHERE”不显示 #

ReactMapGL的直接子元素不会自动渲染到地图上，需要使用它提供的Popup或Marker组件包裹内容。示例用Popup展示文本：

// 先引入Popup组件
import ReactMapGL, { Popup } from 'react-map-gl';

// 在ReactMapGL内部添加
<Popup
  latitude={41.396255}
  longitude={2.189521}
  closeButton={false}
  closeOnClick={false}
>
  INFOHERE
</Popup>

3. 视口状态更新优化 #

建议更新视口时保留原有宽高，避免每次缩放拖拽后尺寸被覆盖：

onViewportChange={newViewport => {
  setViewport(prev => ({...prev, ...newViewport}));
}}

修复后的完整代码 #

// src/App.js
import React,{useState} from 'react';
import './App.css';
import ReactMapGL, { Popup } from 'react-map-gl';


function App() {
  
  const [viewport, setViewport] = useState({
    latitude: 41.396255,
    longitude: 2.189521,
    zoom: 12,
    width:"60vw",
    height:"60vh"
  });

  return (
    <div className="App">
      <div style={{ width: '100vw', height: '100vh' }}>
        <ReactMapGL
          {...viewport}
          mapStyle="mapbox://styles/mapbox/streets-v11"
          onViewportChange={newViewport => {
            setViewport(prev => ({...prev, ...newViewport}));
          }}
          mapboxApiAccessToken={process.env.REACT_APP_MAPBOX_ACCESS_TOKEN}
        >
          <Popup
            latitude={41.396255}
            longitude={2.189521}
            closeButton={false}
            closeOnClick={false}
          >
            INFOHERE
          </Popup>
        </ReactMapGL>
      </div>
    </div>
  );
}

export default App;

右键无法打开控制台的解决 #

右键被拦截大概率是地图容器默认事件被阻止，你可以在地图外层元素添加onContextMenu={(e) => e.stopPropagation()}，或者直接通过浏览器快捷键（如Chrome按F12）手动打开控制台。

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