MAPBOX GL加载2个地图

Question

因此，Mapbox提供的示例代码似乎已损坏。我已经将他们的示例映射组件复制到了地图。JS，由于某种原因，我获得了2个地图而不是1个地图。

import * as React from "react";
import mapboxgl from 'mapbox-gl';
mapboxgl.accessToken = 'API KEY';



export default class Mapy extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
        lng: -70.9,
        lat: 42.35,
        zoom: 9
        };
        this.mapContainer = React.createRef();
        }
        componentDidMount() {
        const { lng, lat, zoom } = this.state;
        const map = new mapboxgl.Map({
        container: this.mapContainer.current,
        style: 'mapbox://styles/mapbox/streets-v11',
        center: [lng, lat],
        zoom: zoom
        });
         
        map.on('move', () => {
        this.setState({
        lng: map.getCenter().lng.toFixed(4),
        lat: map.getCenter().lat.toFixed(4),
        zoom: map.getZoom().toFixed(2)
        });
        });
        }
        render() {
        const { lng, lat, zoom } = this.state;
        return (
        <div>
        <div className="sidebar">
        Longitude: {lng} | Latitude: {lat} | Zoom: {zoom}
        </div>
        <div ref={this.mapContainer} className="map-container" />
        </div>
        );
        }
        }

Answer 1

我有同样的问题＆amp;通过添加以下内容来修复。

导入“ mapbox-gl/dist/mapbox-gl.css”