Маркеры MapBox Перемещение при масштабировании

Я работаю над MapBoxgl и хочу добавить несколько маркеров.

Вот мой index.html:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
        <link href=" /assets/css/bootstrap.min.css " rel="stylesheet" />
        <link href=" /assets/css/mapbox-gl.css " rel="stylesheet" />
        <link href=" /assets/css/main.css " rel="stylesheet" />
</head>
<body>
        <div id="map"></div>

<script src="/assets/js/mapbox-gl.js"></script>
<script src="/assets/js/map-style.js"></script>

</body>
</html>

Это map-style.js:

var map = new mapboxgl.Map({
  container: 'map',
  center: [57.3221, 33.5928],
  zoom: 5,
  style: style
});


var geojson = {
type: 'FeatureCollection',
features: [{
type: 'Feature',
geometry: {
  type: 'Point',
coordinates: [30.61, 46.28]
},
properties: {
  title: 'point 1',
  description: 'point 1 Description',
  message: 'point1',
  iconSize: [25, 25]
}
},
{
type: 'Feature',
geometry: {
  type: 'Point',
coordinates: [30.62, 46.2845]
},
properties: {
  title: 'point 2',
  description: 'point 2 Description',
  message: 'point 2',
  iconSize: [25, 25]
 }
  }]
};

map.on('load', function () {
// add markers to map
geojson.features.forEach(function(marker) {
// create a DOM element for the marker
var el = document.createElement('div');
el.className = 'markers';
el.style.backgroundImage = 'url(assets/marker-azure.png)';
//el.style.width = marker.properties.iconSize[0] + 'px';
el.style.height = marker.properties.iconSize[1] + 'px';

el.addEventListener('click', function() {
    window.alert(marker.properties.message);
});

// add marker to map
new mapboxgl.Marker(el)
    .setLngLat(marker.geometry.coordinates)
    .addTo(map);
});
});

И следующая часть main.css, связанная с картой и маркером:

#map { position:absolute; top:0; bottom:0; width:100% }

.markers {
    display: absolute;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    padding: 0;
}

Итак, моя проблема в том, что когда я добавляю свойство width к маркерам, их значок отображается правильно (с небольшим растяжением), но они находятся в неправильных координатах и ​​перемещаются с увеличением, как на картинке ниже:

введите описание изображения здесь

С другой стороны, если свойство width исключено, они находятся в нужном месте и не перемещаются при масштабировании, но они очень растянуты и фактически равны ширине экрана (следующее изображение):

введите описание изображения здесь

Примечательно, что я использовал бутстрап. Может ли это быть причиной этого? Если нет, то в чем проблема?

Спасибо


mapbox mapbox-gl-js marker
person Mahdi    schedule 01.11.2017    source источник

Ответы (3)


arrow_upward
6
arrow_downward

Я нашел решение и поделился им с другими, кто столкнется с этой проблемой. Проблема возникла из-за использования не самой последней версии библиотеки. После обновления до последней версии я смог избавиться от этой проблемы.

Обратите внимание, что подобные проблемы иногда возникают при использовании npm. Убедитесь, что библиотека загружена полностью и это последняя версия.

Последние версии MapBox можно найти здесь.

person Mahdi    schedule 06.11.2017
comment
Я запутался в своей среде, потому что мой импортированный css mapbox не соответствовал версии mapbox-gl в package.json. Так что проверьте свою голову. что-то вроде этого ‹script src = 'api.mapbox.com/mapbox-gl-js/v2.2.0/mapbox-gl.js '›‹ / ›‹ link href =' api.mapbox.com/mapbox-gl-js/v2.2.0/mapbox-gl.css ' rel = 'stylesheet' / › - person heratyian; 31.03.2021
comment
Спасибо за это! Кодовая база, над которой я работаю, использовала версию 0.46.0, выпущенную в 2018 году. - person Paul J; 20.07.2021

arrow_upward
3
arrow_downward

была аналогичная проблема, маркер, казалось, менял положение при увеличении / уменьшении, исправил его, установив смещение, думал поделиться, если он может помочь другим, вот скрипка

// add marker to map var m = new mapboxgl.Marker(el, {offset: [0, -50/2]}); m.setLngLat(coordinates); m.addTo(map);

person smkhan    schedule 23.08.2019
comment
Чтобы использовать ваше решение, мне пришлось обновить свой Mapbox точно так же, как это объясняется в принятом ответе. Затем я использовал ваш код. Ваше решение спасло меня, спасибо ‹3 - person Farhad; 27.11.2020

arrow_upward
1
arrow_downward 

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

Добавление import css работает для меня.

person Fernando Casaliba Perlangeli    schedule 24.06.2021