1

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

初始位置：

在此处输入图像描述

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

在此处输入图像描述

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

4

2 回答 2

2

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

由于它是一个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>`
于 2019-11-13T17:06:53.577 回答
1

尝试根据您的 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 元素本身中完成。

于 2019-11-19T09:54:09.963 回答