在此处粘贴dom标记可缩放

2024-05-17 • 问答

我正在尝试在此处添加卡车标记。该标记基本上是卡车图标。这是我的代码。

 addDomMarker(posObj): void {
      const map = this.mapComponent.getMap();
      (window as any).mymap = map;
      const domIcon = new H.map.DomIcon(truckIcon);
      this.truckMarker = new H.map.DomMarker(posObj,{
           icon: domIcon
           });

      map.addObject(this.truckMarker);
      map.setCenter(posObj);
   }



 export const truckIcon = `<div class="truck-container">
 <svg class="truck-marker" id="truck"
      ...        // svg code 
 </svg></div>`;

问题是当我放大或缩小时，dom标记正在移动（动画），而不是固定在地图上。

初始位置：

缩小后：（黑色点是初始位置。）

之后，它返回到初始位置。我希望此标记贴在地图上，而不要带有动画。有什么解决办法吗？

尝试根据您的SVG指定图标的宽度，高度和锚点。

const svg = `<svg xmlns="http://www.w3.org/2000/svg" style="width: 28px; height: 28px; margin: -14px 0 0 -14px;" viewBox="0 0 100 100">
<circle cx="50" cy="50" r="50" fill="red" opacity=".5"/>
<circle cx="50" cy="50" r="4" fill="black"/>
</svg>`;

map.addObject(new H.map.DomMarker({lat: 52.51632137414747,lng: 13.378170368203042},{
  icon: new H.map.DomIcon(svg)
}));

完整示例：http://jsfiddle.net/54dkpajg/1/

无法在H.map.DomIcon中设置锚点，需要在指定的DOM元素本身中完成。

您快到了！您只需要将卡车图标居中。默认情况下，图标的左上角位于地理坐标处。如果移动图标使其中心位于地理坐标处，则您提到的“移动效果”将消失。

由于它是 DomIcon ，因此在DOM树中，我们将使用CSS将其居中，方法是将图标宽度的一半向左偏移，将高度的一半向顶部偏移。我们在图标的最外层DOM元素上执行此操作。

因此，假设您的卡车图标的宽度为16像素，高度为40像素，就可以解决问题：

export const truckIcon = 
`<div class="truck-container" style="left: -10px; top: -20px;">
   <svg class="truck-marker" id="truck"
      ... // svg code 
   </svg>
</div>`

在此处粘贴dom标记可缩放

heiheie 回答：在此处粘贴dom标记可缩放

大家都在问