Изменить класс маркера Mapbox в зависимости от категории объекта с помощью JavaScript - PullRequest
Новая
       6

Изменить класс маркера Mapbox в зависимости от категории объекта с помощью JavaScript

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

Я пытаюсь отобразить разные маркеры на карте Mapbox, но мой код, похоже, не соответствует ожиданиям.Я извлекаю данные из пользовательского типа записи WordPress (используемые переменные уже определены): 

function makeObjectsArray() {

  for(var i = 0; i < data.length; i++) {
    placeTitle = data[i].title.rendered;
    placeLong = data[i].acf.longitude;
    placeLat = data[i].acf.latitude;
    placeCategory = data[i].categories;
    place = {
      type: "Feature",
      geometry: {
        type: "Point",
        coordinates: [placeLong, placeLat]
      },
      properties: {
        title: placeTitle,
        category: placeCategory
      }
    };
    placesArray.push(place);      
    categoriesArray.push(placeCategory.toString());//this will create a list of category IDs
  };

};
makeObjectsArray();

и помещаю их в переменную: 

var geojson = {
   type: 'FeatureCollection',
   features: placesArray //an array containing the coordinates and other properties from the custom post type
};

Затем я создаю маркеры (div's): 

geojson.features.forEach(function(marker) {

   // create a HTML element for each feature
   var el = document.createElement("div");
   // I'm adding a class that sets "background-image" of the marker
   el.className = "marker";

   new mapboxgl.Marker(el)
  .setLngLat(marker.geometry.coordinates)
  .addTo(map);

 });

Приведенный выше код работает нормально, но я хотел иметь разные маркеры для разных категорий мест.Для этого я пытался добавить разные классы для разных идентификаторов категорий (скажем, у меня есть только две категории с идентификаторами 2 и 3): 

geojson.features.forEach(function(marker) {

  // create a HTML element for each feature
var el = document.createElement("div");
el.className = "marker";

for(var k = 0; k < categoriesArray.length; k++) {
    var classCat = "";
      if (categoriesArray[k] == 2) {

        classCat = "marker cat2";
        el.className = "";            
        el.className = classCat;

      } else if (categoriesArray[k] == 3) {

        classCat = "marker cat3";
        el.className = ""; 
        el.className = classCat;
  }
}


  // make a marker for each feature and add to the map
  new mapboxgl.Marker(el)
  .setLngLat(marker.geometry.coordinates)
  .addTo(map);

});

Классы .cat2 и .cat3 содержат разные маркеры (фоновые URL).Код выше дает все маркеры класса .cat2.Я подозреваю, что в моей логике JavaScript есть какая-то ошибка, но я пробовал много вариантов вышеупомянутых, и я не могу решить это.Любая помощь будет оценена.

1 Ответ

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

Этот код: 

for(var k = 0; k < categoriesArray.length; k++) {
    var classCat = "";
      if (categoriesArray[k] == 2) {

        classCat = "marker cat2";
        el.className = "";            
        el.className = classCat;

      } else if (categoriesArray[k] == 3) {

        classCat = "marker cat3";
        el.className = ""; 
        el.className = classCat;
  }
}

пересекает все элементы categoriesArray и проверяет для каждого элемента, является ли он 2 или 3. Впоследствии, если categoriesArray по какой-то причине не изменится за это время.(и признаков этого нет), либо ничего не изменится, если в массиве нет совпадений, либо последнее совпадение будет применено ко всем элементам.

Рассмотрим пример, когда categoriesArray[1, 3, 2, 4]

В этом случае для первой итерации ваш цикл не найдет совпадений, на второй итерации он найдет 3 и задает classCat, el.className соответственно, на третьей итерации он будетнайти 2 и переопределит значения для classCat и el.className, установленные на предыдущей итерации, и, наконец, 4 не будет соответствовать ни 2, ни 3.

Ваш алгоритм, так как он будет устанавливать значения, указанные дляПоследнее совпадение в цикле, игнорируя что-либо отличное от 2 или 3, однако вам нужно будет как-то назначить категории вашим маркерам и загрузить эти значения, а затем сопоставить их с категориейучебный класс.Кроме того, el.className = ""; не требуется, поскольку вы переопределяете то же значение в следующей строке.Наконец, classCat не кажется необходимой переменной, вы могли бы просто сделать что-то вроде el.className = "marker cat2";

...