Как добавить динамические маркеры в мапбокс?

я хочу показать динамические маркеры в mapbox js. Я создал динамические маркеры в наборе данных. Теперь. я не понимаю, как их отображать. я хочу такой результат. https://screenshots.firefox.com/yW9nHlICwVAbDLeF/api.mapbox.com

Мой текущий результат. https://screenshots.firefox.com/K1a5WVQHlxtFSIZY/null

заранее спасибо


javascript mapbox mapbox-gl-js mapbox-gl mapbox-marker
person abhi singh    schedule 11.10.2017    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Это очень легко сделать. Я подготовил для вас образец кода.

Я предлагаю внимательно прочитать каждую концепцию, чтобы понять, как она работает.

В Mapbox JS есть отличная документация, которая может вам помочь. https://www.mapbox.com/help/markers-js/#getting-started

L.mapbox.accessToken = 'pk.eyJ1IjoiZGF2aWRiYXR0eSIsImEiOiJjajBqc2hqZ3YwMDN5MndvbDUxaDhoMDV6In0.w7sfrB5JeCH92sY-l0TQSg';
var mapLeaflet = L.mapbox.map('map-leaflet', 'mapbox.light')
  .setView([53.801277, -1.548567],10);

L.marker([53.801277, -1.54856]).addTo(mapLeaflet);
L.marker([53.901277, -1.54856]).addTo(mapLeaflet);

mapLeaflet.scrollWheelZoom.disable();
 body {
      margin: 0;
      padding :0;
    }
    .map {
      position: absolute;
      top: 0;
      bottom: 0;
      width: 100%;
    }
<link href="https://api.mapbox.com/mapbox.js/v3.0.1/mapbox.css" rel="stylesheet"/>
<script src="https://api.mapbox.com/mapbox.js/v3.0.1/mapbox.js"></script>
<div id='map-leaflet' class='map'> </div>

person RedCrusador    schedule 12.10.2017
comment
Спасибо за ваш код @RedCrusador, но я хочу показать разные значки, установленные в наборе данных, в зависимости от их местоположения. - person abhi singh; 13.10.2017
comment
С помощью Mapbox JS очень просто добавлять различные значки. Опять же, вам нужно провести небольшое исследование и попытаться решить это самостоятельно mapbox.com/mapbox.js/example/v1.0.0/l-mapbox-marker вам просто нужно добавить параметр свойств. - person RedCrusador; 13.10.2017
comment
У вас есть какой-нибудь пример? - person abhi singh; 13.10.2017
comment
Это можно решить за пару минут. Вы не можете ожидать, что люди сделают эту работу за вас, если вы не потратите исследования и не приложите усилий, чтобы сделать это самостоятельно. Попробуйте, если вы застряли, опубликуйте пример кода. - person RedCrusador; 13.10.2017