Question

我正在 React 中创建一个 Map 组件。我有三个主要文件 Map.js、Index.js 和 index.html。我正在 Map.js 中创建我的地图组件，在 Index.js 中导入和渲染并在根 index.html 中显示此元素。它正在渲染除 Map 之外的其他元素。并且没有错误。你能指导我吗？

src/Map.js

import React, { Component } from 'react';

import mapboxgl from 'mapbox-gl';

import 'mapbox-gl/dist/mapbox-gl.css';

mapboxgl.accessToken = 'pk.hjdHBnandqeiJ9.zmKxFLnZtE1WZ9SHV-K6rQ';

class MapComponent extends Component {

  constructor(props) {
      super(props);
      this.state = {
        lng: 1.2217,
        lat: 39.8499,
        zoom: 6.48
      };

    }

  componentDidMount() {
      const { lng, lat, zoom } = this.state;

      var map = new mapboxgl.Map({
        container: 'map',
        center: [lng, lat],
        style: 'mapbox://styles/mapbox/streets-v10',
        zoom: zoom
      });

      map.on('move', () => {
        const { lng, lat } = map.getCenter();

        this.setState({
          lng: lng.toFixed(4),
          lat: lat.toFixed(4),
          zoom: map.getZoom().toFixed(2)
        });
      });
  }

  render() {
      const { lng, lat, zoom } = this.state;
      return (
        <div className="App">
            
            <div className="inline-block absolute top left mt12 ml12 bg-darken75 color-white z1 py6 px12 round-full txt-s txt-bold">
              <div>{`Longitude: ${lng} Latitude: ${lat} Zoom: ${zoom}`}</div>
            </div>
          <div id="map" />
        </div>
      );
  }
}

export default MapComponent;

src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Map from "./Components/Map";



ReactDOM.render(<Map />, document.getElementById('root'));

公共/index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta name="theme-color" content="#000000" />
  <meta name="description" content="Web site created using create-react-app" />
  <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />

  <!-- CSS of Mapbox -->

  <link href='https://api.mapbox.com/mapbox-gl-js/v2.3.1/mapbox-gl.css' rel='stylesheet' />
  

  <!--
      manifest.json provides metadata used when your web app is installed on a
      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
    -->
  <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
  <!--
      Notice the use of %PUBLIC_URL% in the tags above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.

      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
  <title>Dashboard</title>
</head>

<body>
  <noscript>You need to enable JavaScript to run this app.</noscript>
  <div id="root"></div>
  <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
</body>

</html>

Mapboxgl.map 未显示在反应组件中？

0 个答案: