Пользовательские маркеры реагируют на карту не остаются в точном положении при увеличении - PullRequest
Новая
       42

Пользовательские маркеры реагируют на карту не остаются в точном положении при увеличении

0 голосов
/ 06 марта 2019

Я работаю над загрузкой карты Mapbox, используя библиотеку Reber-map-gl от Uber.Я успешно загрузил карту с помощью пользовательских маркеров через JSON, который подается из моего API (как вы можете видеть из этого первого изображения).

mapbox

Если вы посмотритехотя на зеленом маркере возле Хьюстона он почему-то выключен где-то в Мексиканском заливе.Однако, если я увеличу эту область ...

zoomed in mapbox

Вы можете видеть, что при увеличении масштаба маркер перестраивается в правильное положение.Что может вызвать что-то вроде этого? 

import ReactMapGL, { Marker, NavigationControl, Popup } from 'react-map-gl';
import CityInfo from './city-info';
import 'mapbox-gl/dist/mapbox-gl.css';

class ExplorePage extends Component {
    state = {
        viewport: {
            width    : 400,
            height   : 400,
            latitude : 38.789093,
            longitude: -95.295881,
            zoom     : 3.7,
        },
        popupInfo: null,
    };

    componentDidMount() {
        this.props.dispatch(explorepageActions.getFavoriteHikes());
    }

    _renderMarker = (marker, index) => {
        return (
            <Marker
                anchor='bottom'
                key={`marker-${index}`}
                longitude={parseFloat(marker.longitude)}
                latitude={parseFloat(marker.latitude)}
            >
                <Pin width={100} onClick={(event) => this._handleClick(event, marker)} />
        </Marker>
        );
    };

    _onViewportChange = viewport => this.setState({viewport});

    render() {
    const { explorepageData, loading } = this.props;
    const { viewport } = this.state;

    return (
        <ExplorePageStyles>
            {loading && <img src='/static/loading.svg' alt='loading' className='loading-img' />}
            {explorepageData.data &&
            <Fragment>
                <Sidebar>
                    <ExploreSidebar favoriteHikes={explorepageData} />
                </Sidebar>
                <ReactMapGL
                    {...viewport}
                    mapboxApiAccessToken={MAPBOX_TOKEN}
                    width='100%'
                    height='100%'
                    style={{ float: 'right' }}
                    onViewportChange={this._onViewportChange}
                    attributionControl={false}
                >
                    {explorepageData.data.map(this._renderMarker)}
                    {this._renderPopup()}
                    <div className="nav" style={navStyle}>
                        <NavigationControl />
                    </div>
                </ReactMapGL>
            </Fragment>
            }
        </ExplorePageStyles>
    );
}

}

1 Ответ

0 голосов
/ 08 марта 2019

Хорошо, после нескольких дней бездельничания, я наконец понял это. Эта проблема была связана с моим использованием пользовательского значка для маркера. Копирование булавки примера заставило его работать правильно.

...