javascript - 在 Here map 上隐藏/显示 map 标记

Question

   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>`;

如果不在 CSS 上使用它， map 标记和仅显示在页面上，该类将被应用。

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

我尝试同时使用 H.map.Icon 和 H.map.DomIcon 以及各自的 Marker 和 DomMarker，但没有成功。

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

这是针对现有 map 的。我想在特定标记上翻转类(或只是将可见性设置为隐藏)。我在 map 上有几个 map 标记。如何检索特定标记并将可见性设置为隐藏或恢复可见？有没有可能根本不重新调用 API 的 Javascript 解决方案？

我也一直在尝试 API 方法，但不确定如何遍历所有标记并设置特定标记的可见性。 DomMarker Get position , setting visibility这是否需要，因为这涉及额外的 API 调用和性能？

如果不需要，我想避免对 API 的额外调用，如果可能的话，我只是直接翻转标记的可见性。

// 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....

            }
    });

Answer 1

请使用 H.map.object.setVisibility(boolean)

https://developer.here.com/documentation/maps/topics_api/h-map-object.html#h-map-object__setvisibility标记也是 H.map.object。它应该在下面。

value.setVisibility(false);