Добавить пользовательский маркер на карту Mapbox - PullRequest
Новая
       13

Добавить пользовательский маркер на карту Mapbox

0 голосов
/ 18 мая 2018

Я использовал mapbox в своем проекте

Я использовал mapbox.js и создавал свою карту с помощью пользовательских маркеров, подобных этому 

 $(function() { 
  const token = '*********';
  let myLatlng = L.latLng(<%= @hotel.lat %>,<%= @hotel.lng %>);
  L.mapbox.accessToken = token;
  let map = L.mapbox.map('map-canvas', 'mapbox.streets')
  .setView(myLatlng, 14);

  let marker = new L.marker(myLatlng,{
    icon: L.icon({
        iconUrl: '//chart.googleapis.com/chart?chst=d_map_pin_icon&chld=home|EBCB2D'
      })
  }).addTo(map);
  });

И я менял значок маркера следующим образом 

  icon: L.icon({
        iconUrl: '//chart.googleapis.com/chart?chst=d_map_pin_icon&chld=home|EBCB2D'
      })

Интересно, есть ли в MapBox GL JS какой-либо сокращенный метод, например rhis, для его изменения?

1 Ответ

0 голосов
/ 22 мая 2018

Чтобы объяснить два приведенных комментария, есть два разных способа добавления пользовательских изображений на карту:

Использование слоев символов

Слой символов существует на карте и может использоватьсядля визуализации источника данных.

Сначала используйте loadImage() для извлечения URL-адреса изображения: 

map.loadImage('https://example.com/image.png', function(error, image) {
    if (error) throw error;

Затем используйте addImage(), чтобы преобразовать извлеченное изображение в значок для использования вкарта: 

   map.addImage('pin', image);

Наконец, используйте этот значок на слое: 

   map.addLayer({ id: 'mypin', type: 'symbol', paint: { 'icon-image': 'pin' });

Полный пример: https://www.mapbox.com/mapbox-gl-js/example/add-image/

Использование маркеров

Кроме того, вы можете использовать маркер.Он существует над картой и не взаимодействует с данными в нем.

Сначала создайте элемент DOM для изображения: 

var el = document.createElement('div');
el.className = 'marker';
el.style.backgroundImage = 'url(https://example.com/icon.png)';
el.style.width = '20px';
el.style.height = '20px';

Затем создайте объект Marker на основе этогоэлемент и добавьте его на карту: 

new mapboxgl.Marker(el)
    .setLngLat(mylatlng)
    .addTo(map);

Полный пример: https://www.mapbox.com/mapbox-gl-js/example/custom-marker-icons/

...