时间戳

首页 > 解决方案 > 在带有特征和图层的 react-mapbox-gl 中显示标记

reactjs - 在带有特征和图层的 react-mapbox-gl 中显示标记

问题描述

我正在使用“alex3165/react-mapbox-gl”GitHub 存储库中的示例代码。不是示例文件夹，而是入门示例。地图显示，但标记只是不显示。不知道我错了什么。一直在为这样一个基本的事情而绞尽脑汁，但无法解决。我已经在网上查看了有关此主题的先前问题，但没有一个对我来说是解决方案。这是我的代码和我的依赖项。帮助将不胜感激。提前谢谢各位。

包 JSON

  "dependencies": {
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "mapbox-gl": "^1.13.0",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-mapbox-gl": "^5.0.0",
    "react-scripts": "4.0.1",
    "web-vitals": "^0.2.4"
  },

代码：

import React, { useState } from "react";
import "./App.css";
import ReactMapboxGl, { Layer, Feature, Marker } from "react-mapbox-gl";
const Map = ReactMapboxGl({
  accessToken: "<my access token goes here>",
});

function App() {
  const [Zoom, setZoom] = useState(10);
  const [coordinates, setcoordinates] = useState([28.0473197, -26.2041059]);
  return (
    <div className="App">
      <Map
        center={coordinates}
        zoom={[Zoom]}
        // eslint-disable-next-line react/style-prop-object
        style="mapbox://styles/mapbox/streets-v9"
        containerStyle={{
          height: "100vh",
          width: "100vw",
        }}
      >
        <Layer type="symbol" id="marker" layout={{ "icon-image": "marker-15" }}>
          <Feature coordinates={[28.0473197, -26.2041059]} />
        </Layer>
      </Map>
    </div>
  );
}

export default App;

标签： reactjsmapboxmapbox-gl

解决方案

推荐阅读