Hide/show Here 地图上的地图标记

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 上使用它，地图标记只显示在页面上，class 被应用。

.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);

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

我也一直在尝试 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

也许某些 copy/paste 在这里工作是您所做但未修改的：console.log(marker.getIcon()); 这不应该是 console.log(value.getIcon());

marker 不是 foreach 循环内的变量

Answer 2

请使用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);

Hide/show Here 地图上的地图标记

Hide/show map marker on Here map

javascript

here-api