Маркеры 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;
}

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

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

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

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

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

Спасибо

7 голосов | спросил Mahdi 1 32017vEurope/Moscow11bEurope/MoscowWed, 01 Nov 2017 06:48:11 +0300 2017, 06:48:11

1 ответ


0

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

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

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

ответил Mahdi 6 12017vEurope/Moscow11bEurope/MoscowMon, 06 Nov 2017 17:59:48 +0300 2017, 17:59:48

Похожие вопросы

Популярные теги

security × 330linux × 316macos × 2827 × 268performance × 244command-line × 241sql-server × 235joomla-3.x × 222java × 189c++ × 186windows × 180cisco × 168bash × 158c# × 142gmail × 139arduino-uno × 139javascript × 134ssh × 133seo × 132mysql × 132