在Google Maps上设置与车辆标记相对位置的剩余距离标记

核心思路 #

别每次拿到新车辆位置就新建剩余距离标记，初始化时只创建一次剩余标记，之后每次车辆位置更新，仅更新这个标记的位置，让它始终基于车辆标记的位置做固定偏移即可。

具体操作步骤 #

1. 初始化两个标记 #

先创建车辆标记和剩余距离标记，剩余标记初始位置可与车辆重合，后续动态调整：

// 初始化车辆标记
const carMarker = new google.maps.Marker({
  position: initialCarPosition, // 传入车辆初始经纬度位置
  map: map,
  icon: '你的车辆图标路径'
});

// 初始化剩余距离标记
const distanceMarker = new google.maps.Marker({
  position: initialCarPosition,
  map: map,
  icon: '你的距离标记图标路径',
  label: {
    text: '剩余500m', // 示例距离文本
    color: 'white',
    fontSize: '12px'
  }
});

2. 定义固定相对偏移量 #

根据需求的相对位置（比如车辆右上方），定义像素偏移值，再编写函数将像素偏移转换为经纬度偏移（适配Google Maps的经纬度定位逻辑）：

// 相对车辆标记的像素偏移：右20px，上20px（Google Maps中Y轴向上为负）
const offsetX = 20;
const offsetY = -20;

// 将像素偏移转换为经纬度位置的工具函数
function getOffsetPosition(basePos, x, y) {
  const zoomScale = Math.pow(2, map.getZoom());
  const worldPoint = map.getProjection().fromLatLngToPoint(basePos);
  const offsetPoint = new google.maps.Point(worldPoint.x + x/zoomScale, worldPoint.y + y/zoomScale);
  return map.getProjection().fromPointToLatLng(offsetPoint);
}

3. 车辆位置更新时同步标记 #

每次获取新车辆位置后，先更新车辆标记位置，再通过工具函数计算剩余标记的相对位置并更新：

// 模拟车辆位置更新的函数
function updateCarLocation(newPos, newDistance) {
  // 更新车辆标记位置
  carMarker.setPosition(newPos);
  
  // 计算并更新剩余距离标记的相对位置
  const distancePos = getOffsetPosition(newPos, offsetX, offsetY);
  distanceMarker.setPosition(distancePos);
  
  // 同步更新剩余距离文本
  distanceMarker.setLabel({
    text: `剩余${newDistance}m`,
    color: 'white',
    fontSize: '12px'
  });
}

4. 进阶方案：用自定义叠加层适配缩放 #

如果希望相对位置随地图缩放自动适配，可使用OverlayView创建自定义叠加层，直接将距离文本绘制在车辆标记的相对位置，无需手动计算经纬度偏移：

class DistanceOverlay extends google.maps.OverlayView {
  constructor(carMarker, distanceText) {
    super();
    this.carMarker = carMarker;
    this.distanceText = distanceText;
    this.div = null;
  }

  onAdd() {
    // 创建显示距离的DOM元素
    const div = document.createElement('div');
    div.style.position = 'absolute';
    div.style.color = 'white';
    div.style.backgroundColor = 'rgba(0,0,0,0.7)';
    div.style.padding = '2px 6px';
    div.style.borderRadius = '3px';
    div.style.fontSize = '12px';
    div.textContent = this.distanceText;
    this.div = div;

    // 添加到地图的叠加层容器
    const panes = this.getPanes();
    panes.overlayImage.appendChild(div);
  }

  draw() {
    // 将车辆经纬度转换为屏幕像素位置，设置相对偏移
    const markerPixel = this.getProjection().fromLatLngToDivPixel(this.carMarker.getPosition());
    this.div.style.left = `${markerPixel.x + 10}px`; // 右移10px
    this.div.style.top = `${markerPixel.y - 30}px`; // 上移30px
  }

  // 更新距离文本的方法
  updateDistance(newText) {
    this.distanceText = newText;
    if (this.div) {
      this.div.textContent = newText;
    }
  }
}

// 初始化叠加层
const distanceOverlay = new DistanceOverlay(carMarker, '剩余500m');
distanceOverlay.setMap(map);

// 车辆位置更新时调用
function updateCarLocation(newPos, newDistance) {
  carMarker.setPosition(newPos);
  distanceOverlay.updateDistance(`剩余${newDistance}m`);
  // 地图缩放或车辆移动时，叠加层会自动重绘位置
}

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