Mapbox GL Изменить значок маркера и щелкнуть и снова при нажатии другой - PullRequest
Новая
       9

Mapbox GL Изменить значок маркера и щелкнуть и снова при нажатии другой

0 голосов
/ 28 января 2019

Как изменить значок маркера 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>

1 Ответ

0 голосов
/ 29 января 2019

Итак, вы устанавливаете класс 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

});

...