时间戳

首页 > 解决方案 > 带有反应js的地图框gl的错误行为

javascript - 带有反应js的地图框gl的错误行为

问题描述

当我改变地图的位置时，它会回到原来的位置。如何消除这种行为？我需要在更改地图的位置时，地图保持在相同的位置。

错误行为 GIF https://gyazo.com/4fa3cf138ceacc1ffdb4cb9055f8b8f3

 <Map
          dragRotate={false}
          scrollZoom={true}
          zoom={[15]}
          center={[23.924760, 54.930400]}
          style="mapbox://styles/mapbox/streets-v9"
          containerStyle={{
            height: "500px",
            width: "100wv"
          }}>
          <ZoomControl/>
          <a href='https://goo.gl/maps/kPEmoBpFUPL2' className='link-primary map-link' target='_blank'>Directions</a>
          <Layer
            type="symbol"
            id="marker"
            layout={{ "icon-image": "harbor-15" }}>
            <Feature
              coordinates={[23.925960, 54.930854]}
            />
          </Layer>
        </Map>

标签： javascriptreactjsmapbox-gl-js

解决方案

当用户移动地图时，您只需要更新地图状态以记录新的地图位置（纬度/经度，缩放...）。例如：

import React from 'react'
import ReactDOM from 'react-dom'
import mapboxgl from 'mapbox-gl'

mapboxgl.accessToken = 'pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4M29iazA2Z2gycXA4N2pmbDZmangifQ.-g_vE53SD2WrJ6tFX7QHmA';

class Application extends React.Component {

  constructor(props: Props) {
    super(props);
    this.state = {
      lng: 5,
      lat: 34,
      zoom: 1.5
    };
  }

  componentDidMount() {
    const { lng, lat, zoom } = this.state;
    const map = new mapboxgl.Map({
      container: this.mapContainer,
      style: 'mapbox://styles/mapbox/streets-v9',
      center: [lng, lat],
      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>
        <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 ref={el => this.mapContainer = el} className="absolute top right left bottom" />
      </div>
    );
  }
}

ReactDOM.render(<Application />, document.getElementById('app'));

有关完整示例，请查看他们在 Github 上的基本样板。

推荐阅读