Mabox-gl-js Маркер переведен в положение - PullRequest
Новая
       6

Mabox-gl-js Маркер переведен в положение

0 голосов
/ 15 ноября 2018

Я пытаюсь использовать https://www.mapbox.com/mapbox-gl-js/api/#marker

const el = document.createElement('div');
el.className = 'marker';

const marker = new mapboxgl.Marker(el, {
  color: '#FFFFFF',
  draggable: true,
  offset: [0, 0],
})
  .setLngLat([0, 0])
  .addTo(this.map);

, который связан с картой: 

this.map = new mapboxgl.Map({
  container: this.mapEl,
  center: [this.props.longitude, this.props.latitude],
  zoom: this.props.zoom,
  maxZoom: 17,
  pitch: this.props.pitch || 0,
  bearing: this.props.bearing || 0,
  style: getStyleByTheme(this.props.theme),
  preserveDrawingBuffer: true,
  attributionControl: false,
});

Проблема в том, что позиция маркера «переводится» с огромнымзначения: transform: translate(-50%, -50%) translate(225173px, 75290px);

При отладке этого вычисления я обнаружил, что проблема возникает в этой строке: https://github.com/mapbox/mapbox-gl-js/blob/e0c4d4679d06be7c0f51970b26a184f8d9ed6d5b/src/ui/marker.js#L338

Итак, я пошел дальше: 

this.map.project(marker.getLngLat())._add(marker.getOffset())

возвращает {x: 225173.2033574923, y: 75289.74831606582}

И, удалив вызов функции _add и выведя значение this.map.project(marker.getLngLat()), я получаю то же значение.

Итак, на самом деле это происходит здесь: https://github.com/mapbox/mapbox-gl-js/blob/e0c4d4679d06be7c0f51970b26a184f8d9ed6d5b/src/ui/map.js#L616

Что приводит меня к https://github.com/mapbox/mapbox-gl-js/blob/7b4be8d247c7351df83316eed0f8d20d3a184722/src/geo/transform.js#L314

Ооо, я потерян

Чтоможет быть проблема здесь?Это Mapbox-gl-js, моя карта или структура событий?

Пожалуйста, помогите.:)

1 Ответ

0 голосов
/ 15 ноября 2018

Хорошо, я понял это - это была моя вина!

Как сказано здесь в документации - https://www.mapbox.com/mapbox-gl-js/api/#map#project "Возвращает точку, представляющую пиксельные координаты относительно контейнера карты, которые соответствуют указанному географическому местоположению."

Я использовал .setLngLat([0, 0]) но карта фактически указала на другое местоположение.

Используя тот же LngLat, с которым центрирована карта, я устранил проблему.:)

...