Question

如何在单击时更改mapbox gl js标记图标，然后在单击新图标时再次将其更改回？我可以通过为它分配另一个类来弄清楚如何在单击时更改标记，但是当单击一个新标记时，如何重新将其更改回原来的位置？我想知道是否有可能。谢谢。

<!DOCTYPE html>
<html>
<head>
    <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/v0.52.0/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.css' rel='stylesheet' />
    <style>
        body { margin:0; padding:0; }
        #map { position:absolute; top:0; bottom:0; width:100%; }
        .marker {
            background-image: url('mapbox-icon.png');
            background-size: cover;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            cursor: pointer;
        }
        .mapboxgl-popup {
            max-width: 200px;
        }
        .mapboxgl-popup-content {
            text-align: center;
            font-family: 'Open Sans', sans-serif;
        }

    </style>
</head>
<body>

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

<script>

mapboxgl.accessToken = 'pk.eyJ1IjoiZXhhbXBsZXMiLCJhIjoiY2lqbmpqazdlMDBsdnRva284cWd3bm11byJ9.V6Hg2oYJwMAxeoR9GEzkAA';

var geojson = {
    "type": "FeatureCollection",
    "features": [{
         "type": "Feature",
         "geometry": {
             "type": "Point",
             "coordinates": [-77.032, 38.913]
         },
         "properties": {
             "title": "Mapbox",
             "description": "Washington, D.C."
         }
     },
     {
         "type": "Feature",
         "geometry": {
         "type": "Point",
         "coordinates": [-122.414, 37.776]
        },
         "properties": {
             "title": "Mapbox",
             "description": "San Francisco, California"
         }
     }]
};

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

// 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 it 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);

    el.addEventListener('click', function(e){                   
              // change the marker color, then change it back again. 
              // I can set for example el.className = 'marker2'
              // but how can I change it back to the original
   });
});

</script>

</body>
</html>

Answer 1

因此，您将marker2类设置为单击的标记。您可以在删除该类之前，在具有该类的任何元素上删除该类。像这样：

el.addEventListener('click', function(e){
  // get all the elements with class "marker2"
  var x = document.getElementsByClassName("marker2");
  var i;
  for (i = 0; i < x.length; i++) {
    x[i].className = "marker"; // set "marker" as the class for each of those elements
  }
  // at this point all markers are back to the original state

  // now you set the class of the current clicked marker
  this.className = 'marker2'; //don't use the variable "el", it's out of the scope and can change, "this" is the current clicked element

}）;

Mapbox GL更改标记图标，然后单击并在单击另一个时再次返回

1 个答案: