在此处粘贴dom标记可缩放 [英] Stick dom marker in here maps on zooming

问题描述

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

I'm trying to add a truck Marker in the HERE Map. This marker is basically a truck icon. Here is my code.

 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标记正在移动(动画)，而不是固定在地图上.

Problem is when I'm zooming in or out, instead of sticking to the map , the dom marker is moving(animation).

初始位置:

缩小后:(黑色点是初始位置.)

After zoom out: ( black color dot is initial position.)

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

After that it comes back to initial position. I want this marker to stick on the map rather that having animation. Is there any work around?

推荐答案

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

You're almost there! You only need to center your truck icon. By default, the icon top-left corner is positioned at geocoordinates. If you shift the icon so that its center is at the geocoordinates, the "moving effect" you are mentioning will disappear.

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

Since it is a DomIcon, therefore in the DOM tree, we'll center it using CSS by offsetting half of the icon width to the left, and half of the height towards the top. We do this on the outermost DOM element of the icon.

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

So assuming your truck icon is 16px width, 40px height, this would do the trick:

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

这篇关于在此处粘贴dom标记可缩放的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！