here-api 如何搜索 svg 标记并将其从 H.map.Group 移动到另一个

Question

我有一个包含蓝色 svg 标记的地图组和一个包含绿色 svg 标记的地图组当用户点击标记时，我想找到点击的标记并将其移动到相反的组，这意味着如果用户点击蓝色标记，标记应该将组和颜色从蓝色更改为绿色，反之亦然。

这里有代码 html 和 js 没有 api_key:

    <html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes">
    <meta http-equiv="Content-type" content="text/html;charset=UTF-8">
    
    <title>Display a map with custom SVG markers</title>
    <link rel="stylesheet" type="text/css" href="demo.css" />
    <script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-core.js"></script>
    <script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-service.js"></script>
    <script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-ui.js"></script>
    <script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-mapevents.js"></script>
  </head>
  <body id="markers-on-the-map">
    
    <div class="page-header">
        <h1>SVG Graphic Markers</h1>
    <div id="map"></div>
    <script> 
    function PinpointsvgMarkers() {
     map.addObject(blueGroup);
       blueGroup.addEventListener('tap', function (evt) {
     }, false);
     for (i=0;i<list.length;i++){
           var point = new H.geo.Point(list[i].lat, list[i].lng);
           var svgicon = new H.map.Icon(svg.replace('#090', '#009').replace( /__num__/g, 1 ), options);
           addsvgMarkerToGroup(i+1, blueGroup, point, '#009', 2);
         }
  }


function addsvgMarkerToGroup(i, group, coords, color, onOff) {
 var svgBlueMarker = new H.map.Icon(svg.replace('#090', color).replace( /__num__/g, i ), options);
 var svgGreenMarker = new H.map.Icon(svg.replace('#009', '#090').replace( /__num__/g, i ),options);

   var marker = new H.map.Marker(coords,{icon: svgBlueMarker});
   marker.addEventListener('tap', function(e) {
     if(onOff === 1){
       marker.setIcon(svgBlueMarker);
     }else if(onOff === 2){
       marker.setIcon(svgGreenMarker);
     }  
 });
 blueGroup.addObject(marker);
 }
 
 
 function changeGroupForTheClickedMarker(marker, oldGroup, newGroup){
     // here I wont to find the the marker and delete it from the old group and create it in the new group and change to the appropriate color.
 }


var platform = new H.service.Platform({
  apikey: "YOUR_API_KEY"
});
var defaultLayers = platform.createDefaultLayers();

var map = new H.Map(document.getElementById('map'),
  defaultLayers.vector.normal.map,{
  center: {lat:59.34084, lng:18.03298},
  zoom: 11,
  pixelRatio: window.devicePixelRatio || 1
});
window.addEventListener('resize', () => map.getViewPort().resize());
var behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map));
var ui = H.ui.UI.createDefault(map, defaultLayers);
var blueGroup = new H.map.Group();
var greenGroup = new H.map.Group();
var list = [
                {lat:'59.34084', lng:'18.03298'},
                {lat:'59.34199', lng:'18.09176'},
                {lat:'59.33713', lng:'18.06236'},
                {lat:'59.34025', lng:'18.11398'}
            ]

 var svg = `<svg xmlns="http://www.w3.org/2000/svg" width="28px" height="36px">
            <path d="M 19 31 C 19 32.7 16.3 34 13 34 C 9.7 34 7 32.7 7 31 C 7 29.3 9.7 28 13 28 C 16.3 28 19
             29.3 19 31 Z" fill="#000" fill-opacity=".2"/>
            <path d="M 13 0 C 9.5 0 6.3 1.3 3.8 3.8 C 1.4 7.8 0 9.4 0 12.8 C 0 16.3 1.4 19.5 3.8 21.9 L 13 31 L 22.2
             21.9 C 24.6 19.5 25.9 16.3 25.9 12.8 C 25.9 9.4 24.6 6.1 22.1 3.8 C 19.7 1.3 16.5 0 13 0 Z" fill="#fff"/>
            <path d="M 13 2.2 C 6 2.2 2.3 7.2 2.1 12.8 C 2.1 16.1 3.1 18.4 5.2 20.5 L 13 28.2 L 20.8 20.5 C
             22.9 18.4 23.8 16.2 23.8 12.8 C 23.6 7.07 20 2.2 13 2.2 Z" fill="#090"/>
            <text id="label-text" xml:space="preserve" text-anchor="middle" font-family="Sans-serif" font-size="12" font-weight="bold" y="16" x="13" stroke-width="0" fill="#ffffff">__num__</text>
            </svg>`
  var options = {
    'size': new H.math.Size(28, 36),
    'anchor': new H.math.Point(14, 32),
    'hitArea': new H.map.HitArea(
        H.map.HitArea.ShapeType.POLYGON, [0, 16, 0, 7, 8, 0, 18, 0, 26, 7, 26, 16, 18, 34, 8, 34])
  };

PinpointsvgMarkers(map);
    </script>
  </body>
</html>

Answer 1

SVG 标记之间的切换可以通过使用方法 setData (data)

设置任意值来实现

文档 link：https://developer.here.com/documentation/maps/3.1.25.0/api_reference/H.map.Marker.html

例如：

   var marker = new H.map.Marker(coords,{icon: svgBlueMarker});
     marker.setData({status: 'on'})
   marker.addEventListener('tap', function(e) {
console.log("1");
     if(marker.getData().status == "on"){
               marker.setIcon(svgGreenMarker);
                 console.log("2");
marker.setData({status: 'off'})
}else if(marker.getData().status == "off"){
       marker.setIcon(svgBlueMarker);
             console.log("3");
             marker.setData({status: 'on'})
     }
 });
 blueGroup.addObject(marker);
 }

在此处添加工作示例：https://jsfiddle.net/raj0665/emwvub89/9/

here-api 如何搜索 svg 标记并将其从 H.map.Group 移动到另一个

here-api how to search and move an svg marker from a H.map.Group to an other

javascript

svg

here-api