时间戳

首页 > 解决方案 > 在此处粘贴 dom 标记以进行缩放

javascript - 在此处粘贴 dom 标记以进行缩放

问题描述

我正在尝试在 HERE 地图中添加卡车标记。这个标记基本上是一个卡车图标。这是我的代码。

 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 标记不是粘在地图上，而是在移动（动画）。

初始位置：

在此处输入图像描述

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

在此处输入图像描述

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

标签： javascriptmapshere-apihere-maps-rest

解决方案

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

由于它是一个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>`

推荐阅读