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>`;

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

Initial Position:

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?

回答1:

Try to specify the icon width, height, and anchor according to your 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)
}));

Full example: http://jsfiddle.net/54dkpajg/1/

Setting anchor point in H.map.DomIcon is not possible and needs to be done in the specified DOM element itself.

回答2:

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.

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.

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>`

来源：https://stackoverflow.com/questions/58813574/stick-dom-marker-in-here-maps-on-zooming

标签

javascript

maps

here-api

here-maps-rest