Masquer / afficher le marqueur de la carte sur la carte Ici

   const testIcon = `<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg">
<rect stroke="white" fill="blue" x="1" y="1" width="22" height="22" /></svg>`;

Sans utiliser cela sur CSS, le marqueur de carte et simplement afficher sur la page, la classe est appliquée.

.hide { visibility: hidden }
.show { visibility: visible }

J'ai essayé d'utiliser à la fois H.map.Icon et H.map.DomIcon et respectivement Marker et DomMarker, sans succès.

var icon = new H.map.DomIcon(testIcon);
var marker = new H.map.DomMarker({lat: 'latitudeVal', lng: 'longitudeVal'};, { icon:icon })
map.addObject(marker);

Ceci est pour une carte existante. Je veux inverser les classes (ou simplement définir la visibilité sur masqué) sur des marqueurs spécifiques. J'ai plusieurs marqueurs de carte sur la carte. Comment puis-je récupérer des marqueurs spécifiques et définir la visibilité sur masqué ou de nouveau sur visible? Existe-t-il une solution Javascript possible sans ré-invoquer l'API du tout?

J'ai également essayé l'approche API, mais je ne sais pas comment parcourir tous les marqueurs et définir la visibilité sur des marqueurs spécifiques. DomMarker Obtenir la position , définir la visibilité Est-ce nécessaire, car cela implique des appels d'API et des performances supplémentaires?

Je veux éviter les appels supplémentaires à l'API si ce n'est pas nécessaire et inverser simplement la visibilité sur le marqueur directement si cela est possible.

// The icon gets added fine... 
  const testIcon = `<svg width="25" height="25" class="show" xmlns="http://www.w3.org/2000/svg"><ellipse cx="10" cy="10" rx="8" ry="8" fill="blue"  /></svg>`;

  const hideIcon = `<svg visibility="hidden" width="12" height="12" xmlns="http://www.w3.org/2000/svg"><ellipse cx="6" cy="6" rx="5" ry="5" fill="#5980B2" stroke="white" /></svg>`;
  let mapMarkerList = [];  // Could this be used. 
    data.forEach(function (mapMarker, i) {
        var icon = new H.map.DomIcon(testIcon);
        let marker = new H.map.DomMarker( { lat: mapMarker.lat, lng: mapMarker.long } , { icon:icon })
        map.addObject(marker);
        mapMarkerList.append(marker); 
   });

    toggleMarkers(data, map, '1'); 

// dataset looks like:
dataset = {
        { lat:'123', long:'-123', customData: 'abc' }, 
        { lat:'123', long:'-123', customData: 'x' }, 
        { lat:'123', long:'-123', customData: 'abc' }, 
    }
        function realToggleMarkers(mapMarkers, valueToFilter, map) {
// Hide all 'abc' lat/long markers... 
        dataset.forEach(function (value, i) {
           if(valueToFilter !== value.customData ) {
              console.log('Hide');
                // There's also a value.lat and value.long here that I create marker with. I need to hide that specific marker.
                // mapMarkers loop through? === value.lat? then hide.
                // mapMarker[0].getPosition().lat // How can I check this matches value.lat without nested loops?
          } else { 
            console.log('Show');
          }
        });
}

    // Doesn't work....
    // Use the map object above and hide/show specific markers.....     
      function toggleMarkers(mapMarkers, map, valueToFilter) {  
        mapMarkers.forEach(function (value, i) {
            if(i%2===0) {
            // How can we get individual marker from the 'map' object built out above?
              console.log(marker.getIcon());
              // Doesn't work.... 
              marker.getIcon().setVisibility(false); // Or any other approach changing the visibility....

            }
    });