Mapbox GL Marker无法渲染及获取点击位置坐标问题求助

一、Marker不显示的修复方案 #

1. 本地图片路径错误 #

React中引用本地静态资源不能直接使用相对路径./pin.jpg，需先导入图片：

import pinImage from './pin.jpg'; // 确保图片路径与组件文件对应

之后在Marker组件中使用该导入的图片：

<Marker longitude={lng} latitude={lat} anchor="bottom">
  <img src={pinImage} style={{width: '30px', height: '30px'}} />
</Marker>

若使用网络图片可直接填URL；若图片放在public目录下，路径改为/pin.jpg即可。

2. 初始坐标位置问题 #

你的初始lat和lng均为0，对应位置在大西洋中部，即使Marker正常渲染也可能因无地形参照难以察觉。建议设置一个有实际地形的初始坐标，例如：

const [lat, setLat] = useState(39.9042); // 北京纬度
const [lng, setLng] = useState(116.4074); // 北京经度

3. Marker样式缺失 #

若图片尺寸过小或未设置样式，可能导致Marker不可见，给img标签添加固定宽高样式确保显示。

二、获取标记位置坐标 #

1. 获取当前Marker坐标 #

你已通过state维护lat和lng，直接读取这两个状态值即可得到标记坐标，可在组件中添加显示区域：

<div style={{margin: '10px'}}>
  当前标记坐标：纬度 {lat}，经度 {lng}
</div>

2. 点击地图添加/移动Marker并获取坐标 #

若需点击地图任意位置放置Marker并获取坐标，给Map组件添加onClick事件：

<Map
  // 其他属性保持不变
  onClick={(e) => {
    const { lng: newLng, lat: newLat } = e.lngLat;
    setLng(newLng);
    setLat(newLat);
    setCoordinates([newLng, newLat]); // 将坐标存入coordinates状态
  }}
>
  {/* Marker代码 */}
</Map>

修复后的完整代码示例 #

import React, { useState } from "react";
import ReactMapboxGl, { Marker } from "react-mapbox-gl";
import "mapbox-gl/dist/mapbox-gl.css";
import pinImage from './pin.jpg'; // 导入本地标记图片

// 初始化Map组件，使用环境变量中的token
const Map = ReactMapboxGl({
  accessToken: process.env.REACT_APP_TOKEN,
});

function MapComponent() {
  const [lat, setLat] = useState(39.9042);
  const [lng, setLng] = useState(116.4074);
  const [zoom, setZoom] = useState(13);
  const [coordinates, setCoordinates] = useState([lng, lat]);

  return (
    <div style={{ width: "100vw", height: "100vh" }}>
      <div style={{margin: '10px'}}>
        当前标记坐标：纬度 {lat}，经度 {lng}
      </div>
      <Map
        style="mapbox://styles/mapbox/streets-v9"
        containerStyle={{ height: "70vh", width: "70vw" }}
        center={[lng, lat]}
        zoom={[zoom]}
        onClick={(e) => {
          const { lng: newLng, lat: newLat } = e.lngLat;
          setLng(newLng);
          setLat(newLat);
          setCoordinates([newLng, newLat]);
        }}
      >
        <Marker longitude={lng} latitude={lat} anchor="bottom">
          <img src={pinImage} style={{width: '30px', height: '30px', cursor: 'pointer'}} />
        </Marker>
      </Map>
    </div>
  );
}

export default MapComponent;

额外注意事项 #

• 避免硬编码accessToken，使用环境变量process.env.REACT_APP_TOKEN，需在.env文件中配置REACT_APP_TOKEN=你的Mapbox令牌。
• 确保安装完整依赖：npm install react-mapbox-gl mapbox-gl。
• 若使用Chakra UI的Img组件，替换<img>为<Img src={pinImage} boxSize="30px" />即可。

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