如何在HERE Maps Explorer版本中实现标记点位置的平滑移动动画

Hey Victor, great call focusing on reusing a single marker instead of destroying and recreating them—this is exactly the right approach to get smooth, natural movement like Uber. Let’s walk through how to implement this with HERE Maps Explorer, step by step.

Core Concept #

Instead of clearing your marker list and adding a new marker every time you get a location update, you’ll:

• Create one single user marker when your app initializes.
• Update this marker’s position incrementally with a smooth animation whenever a new location is received.

Step 1: Initialize Your Map and Single User Marker #

First, set up your map and create the user marker once (not every location update). This marker will be reused for all position changes:

// Initialize HERE Maps platform
const platform = new H.service.Platform({
    apikey: 'YOUR_HERE_API_KEY'
});
const defaultLayers = platform.createDefaultLayers();

// Create map instance
const map = new H.Map(
    document.getElementById('map-container'),
    defaultLayers.vector.normal.map,
    {
        zoom: 15,
        center: { lat: YOUR_INITIAL_LAT, lng: YOUR_INITIAL_LNG } // Use first known location or default
    }
);

// Initialize single user marker (only run this once!)
let userMarker;
function initUserMarker(initialPosition) {
    // Customize your user icon here
    const userIcon = new H.map.Icon('/path-to-your-user-icon.png', { 
        size: { w: 40, h: 40 },
        anchor: { x: 20, y: 40 } // Center icon on the user's location
    });

    userMarker = new H.map.Marker(initialPosition, { icon: userIcon });
    map.addObject(userMarker);
}

// Call this with your first location reading
initUserMarker({ lat: FIRST_LOCATION_LAT, lng: FIRST_LOCATION_LNG });

Step 2: Smoothly Update Marker Position on Location Changes #

Use HERE’s built-in animation utilities to interpolate between the marker’s current position and the new location. This eliminates the "teleport" effect by moving the marker gradually:

// Handle new location updates from your intermittent thread
function handleNewLocation(newCoords) {
    if (!userMarker) return; // Guard against uninitialized marker

    const currentPos = userMarker.getGeometry();
    const targetPos = new H.geo.Point(newCoords.latitude, newCoords.longitude);

    // Create a smooth animation between current and target position
    const positionAnimation = new H.util.Animation({
        duration: 1000, // Adjust this based on your update interval (e.g., 800ms for 10s updates)
        easing: H.util.Animation.Easing.EASE_IN_OUT, // Natural acceleration/deceleration
        onUpdate: (progress) => {
            // Interpolate between current and target positions using animation progress (0 to 1)
            const interpolatedLat = currentPos.lat + (targetPos.lat - currentPos.lat) * progress;
            const interpolatedLng = currentPos.lng + (targetPos.lng - currentPos.lng) * progress;
            
            // Update the marker's position
            userMarker.setPosition({ lat: interpolatedLat, lng: interpolatedLng });

            // Optional: Smoothly pan the map to follow the marker
            map.setCenter({ lat: interpolatedLat, lng: interpolatedLng }, true);
        }
    });

    // Start the animation
    positionAnimation.start();
}

// Example: Hook into your Google location service callback
function onGoogleLocationReceived(position) {
    handleNewLocation(position.coords);
}

Bonus Optimizations for Uber-like Polish #

• Throttle Location Updates: If your intermittent thread fires more frequently than your animation duration, add a throttle to avoid overlapping animations.
• Add Heading Rotation: If your location data includes a heading (direction the user is moving), rotate the marker to match:

  userMarker.setRotation(newCoords.heading);
  

• Adjust Animation Timing: Match the duration to your update interval. For example, if you get updates every 10 seconds, set the animation to 800-1000ms so the marker finishes moving right before the next update.

This approach ensures your user marker glides smoothly across the map instead of jumping, just like in professional ride-sharing apps.

内容的提问来源于stack exchange，提问作者Victor Pierre