добавить класс в элемент js

Question

Как в следующем коде добавить класс к каждому из маркеров местоположения? Мне нужно добавить класс, чтобы затем я мог запускать разные изображения при наведении курсора для обоих маркеров.

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

var map = new mapboxgl.Map({
  container: 'map',
  style: 'mapbox://styles/mapbox/light-v10',
  center: [2.143, 41.388],
  zoom: 12
});

// code from the next step will go here!
var geojson = {
  type: 'Locations',
  features: [{
      type: 'Location',
      geometry: {
        type: 'Point',
        coordinates: [2.174520, 41.388851]
      },
      properties: {
        title: 'TRAFALGAR 6',
        description: 'Carrer De Trafalgar, 6, 08010 Barcelona, Spain'
      }
    },
    {
      type: 'Location',
      geometry: {
        type: 'Point',
        coordinates: [2.109630, 41.383520]
      },
      properties: {
        title: 'JUAN CARLOS FAIRMONT',
        description: 'Avinguda Diagonal, 661 671, 08028 Barcelona, Spain'
      }
    }
  ]
};

// add markers to map
geojson.features.forEach(function(marker) {

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

  // make a marker for each feature and add to the map
  new mapboxgl.Marker(el)
    .setLngLat(marker.geometry.coordinates)
    .setPopup(new mapboxgl.Popup({
        offset: 25
      }) // add popups
      .setHTML('<h3>' + marker.properties.title + '</h3><p>' + marker.properties.description + '</p>'))
    .addTo(map);
});

// disable map zoom when using scroll
map.scrollZoom.disable();

// Add zoom and rotation controls to the map.
var nav = new mapboxgl.NavigationControl({
  showCompass: false,
  showZoom: true
});

map.addControl(nav, "top-left");

body {
  margin: 0;
  padding: 0;
}

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

.marker {
  background-image: url('https://cdn.glitch.com/83d2fce6-58e7-4b74-8ce5-b1a43ae0945a/thumbnails/unnamed.png?1592467484333');
  background-size: cover;
  width: 35px;
  height: 35px;
  cursor: pointer;
}

.marker:hover {
  background-image: url('https://cdn.glitch.com/83d2fce6-58e7-4b74-8ce5-b1a43ae0945a/Elijah logo.png?1592453844803');
}

<meta charset='utf-8' />
<title></title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.11.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.11.0/mapbox-gl.css' rel='stylesheet' />

<div id='map'></div>

Answer 1

• Вы можете получить доступ к маркерам как mapboxgl-canvas-container marker

---

[...document.querySelectorAll("mapboxgl-canvas-container marker")]
  .forEach((marker,i) => marker.id = "marker"+i)

---

• Вы можете получить доступ к mapboxgl-popup-content после щелчка

---

document.getElementById("map").addEventListener("mouseover",function(e) {
  const tgt = e.target;
  if (tgt.classList.contains("mapboxgl-popup-content")) {
    // tgt.style.border="3px solid red";
    if (!tgt.id) tgt.id = tgt.querySelector("h3").textContent.replace(/\s+/g,"_");
  }
})

var map = new mapboxgl.Map({
  container: 'map',
  style: 'mapbox://styles/mapbox/light-v10',
  center: [2.143, 41.388],
  zoom: 12
});

// code from the next step will go here!
var geojson = {
  type: 'Locations',
  features: [{
      type: 'Location',
      geometry: {
        type: 'Point',
        coordinates: [2.174520, 41.388851]
      },
      properties: {
        title: 'TRAFALGAR 6',
        description: 'Carrer De Trafalgar, 6, 08010 Barcelona, Spain'
      }
    },
    {
      type: 'Location',
      geometry: {
        type: 'Point',
        coordinates: [2.109630, 41.383520]
      },
      properties: {
        title: 'JUAN CARLOS FAIRMONT',
        description: 'Avinguda Diagonal, 661 671, 08028 Barcelona, Spain'
      }
    }
  ]
};

// add markers to map
geojson.features.forEach(function(marker) {

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

  // make a marker for each feature and add to the map
  new mapboxgl.Marker(el)
    .setLngLat(marker.geometry.coordinates)
    .setPopup(new mapboxgl.Popup({
        offset: 25
      }) // add popups
      .setHTML('<h3>' + marker.properties.title + '</h3><p>' + marker.properties.description + '</p>'))
    .addTo(map);
});

// disable map zoom when using scroll
map.scrollZoom.disable();

// Add zoom and rotation controls to the map.
var nav = new mapboxgl.NavigationControl({
  showCompass: false,
  showZoom: true
});

map.addControl(nav, "top-left");

document.getElementById("map").addEventListener("mouseover", function(e) {
  const tgt = e.target;
  if (tgt.classList.contains("mapboxgl-popup-content")) {
    // tgt.style.border="3px solid red";
    if (!tgt.id) tgt.id = tgt.querySelector("h3").textContent.replace(/\s+/g, "_")
  }
});
[...document.querySelectorAll(".mapboxgl-canvas-container .marker")].forEach((marker, i) => marker.id = "marker" + (i+1))

const hoverIt = e => {
  const tgt = e.target;
  if (tgt.id === "rollover1" || tgt.id === "rollover2") {
    const type = e.type
    const over = type === "mouseenter";
    const id = "marker"+tgt.id.replace("rollover","");
    document.getElementById(id).classList.toggle("hovered",over); // this does nothing to the flag!
  }  
};

document.getElementById("container").addEventListener("mouseenter",hoverIt)
document.getElementById("container").addEventListener("mouseleave",hoverIt)

body {
  margin: 0;
  padding: 0;
}

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

.marker {
  background-image: url('https://cdn.glitch.com/83d2fce6-58e7-4b74-8ce5-b1a43ae0945a/thumbnails/unnamed.png?1592467484333');
  background-size: cover;
  width: 35px;
  height: 35px;
  cursor: pointer;
}

.marker:hover {
  background-image: url('https://cdn.glitch.com/83d2fce6-58e7-4b74-8ce5-b1a43ae0945a/Elijah logo.png?1592453844803');
}

#TRAFALGAR_6 {
  border: 1px solid green;
}

#marker1 {
  background-color: red;
}

#marker1.hovered { background-image = url(https://cdn.shopify.com/s/files/1/0051/9628/3977/t/7/assets/pf-b3c6e0ef--Locationshero.jpg?v=1589772232) }

#marker2 {
  background-color: green;
}

#marker2.hovered { background-image = url(https://cdn.shopify.com/s/files/1/0051/9628/3977/t/7/assets/pf-fdd801e3--Fairmont.jpg?v=1589773965) }

<meta charset='utf-8' />
<title></title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.11.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.11.0/mapbox-gl.css' rel='stylesheet' />

<div id='map'></div>

<div class="sc-pkUyL fTyjzF pf-f382b2d9" id="container" data-pf-type="Column" style="background-image: none;">
  <h3 data-pf-type="Heading" class="sc-oTLFK lcHmGL pf-d8a72a12"><span data-pf-type="Text" class="sc-ptSuy fnmilh pf-80d8a72a">LOCATIONS</span></h3>
  <h3 id="rollover1" data-pf-type="Heading" class="sc-oTLFK lcHmGL pf-129e995e locationstext"><a data-color="inherit" href="/pages/trafalgar-6" target="_self"><span data-pf-type="Text" class="sc-ptSuy fnmilh pf-2a129e99">TRAFALGAR 6</span></a></h3>
  <h3 id="rollover2" data-pf-type="Heading" class="sc-oTLFK lcHmGL pf-5ef382b2 locationstext"><span data-pf-type="Text" class="sc-ptSuy fnmilh pf-995ef382">JUAN CARLOS FAIRMONT</span></h3>
</div>