Google Maps：如何添加多个当前位置样式的实时标记并显示路线

嘿，我来帮你搞定这个需求！不管你是普通用户想用Google Maps原生功能追踪家人位置，还是开发者想自己搭建类似Telegram的实时定位功能，都有对应的解决方案：

一、普通用户：用Google Maps原生功能实现家人实时位置共享+路线查看 #

如果你只是想日常查看家人的实时位置并获取路线，完全不用折腾开发，Google Maps本身就自带这个功能：

• 让家人开启实时位置共享：打开Google Maps App，点击自己的蓝色当前位置标记 → 选择「共享位置」，设置共享时长（可以选「直到你关闭」），然后把共享链接发给家人或者直接选择通讯录里的联系人（需要对方用Google账号登录Maps）。
• 查看家人的实时标记：你打开Google Maps后，点击左上角的菜单按钮 → 选择「你的联系人」，就能看到已经共享位置的家人的实时蓝色标记（和你自己的位置标记一样，会随着他们的移动实时更新）。或者直接在搜索栏搜索家人的名字，他们的实时位置也会显示在地图上。
• 获取实时路线：点击家人的实时标记，在弹出的卡片里选择「路线」，Google Maps会自动生成从你当前位置到他们实时位置的导航路线，而且当他们移动时，路线会同步更新。

二、开发者：用Google Maps API实现多实时标记+动态路线 #

如果是想开发类似Telegram的实时定位功能，比如做一个专属的家人追踪应用，可以用Google Maps的官方API来实现：

1. 添加实时移动标记 #

• 首先得获取每个用户的实时位置数据：可以通过设备的GPS接口获取，然后用WebSocket、Firebase实时数据库这类工具把位置推送到服务器，再同步到其他用户的地图上。
• 在地图上创建标记：
  • 以Web端的JavaScript API为例，用new google.maps.Marker()创建标记，你可以用Google官方的蓝色圆点图标（和原生位置标记一致），或者自定义颜色来区分不同用户。
  • 当收到位置更新时，调用marker.setPosition(new google.maps.LatLng(lat, lng))就能让标记实时移动，和原生的蓝色标记效果一样。

2. 实时更新路线 #

• 用Google Maps的DirectionsServiceAPI来生成路线：
  • 构造路线请求，传入你的位置和家人的实时位置作为起点、终点，选择出行方式（驾车、步行等）。
  • 调用directionsService.route()获取路线数据，再用DirectionsRenderer把路线渲染在地图上。
  • 每当家人的位置更新时，重新发起路线请求，就能实现路线的实时更新。

简单代码示例（Web端） #

// 初始化地图
const map = new google.maps.Map(document.getElementById("map"), {
  center: { lat: 你的纬度, lng: 你的经度 },
  zoom: 12,
});

// 创建自己的位置标记（用官方蓝色圆点）
const myMarker = new google.maps.Marker({
  position: { lat: 你的纬度, lng: 你的经度 },
  map: map,
  icon: "https://maps.gstatic.com/mapfiles/ms/icons/blue-dot.png",
});

// 创建家人的位置标记（用绿色区分）
const familyMarker = new google.maps.Marker({
  position: { lat: 家人初始纬度, lng: 家人初始经度 },
  map: map,
  icon: "https://maps.gstatic.com/mapfiles/ms/icons/green-dot.png",
});

// 模拟通过WebSocket获取家人位置更新
const webSocket = new WebSocket("你的实时位置推送地址");
webSocket.onmessage = (event) => {
  const newPos = JSON.parse(event.data);
  // 更新家人标记位置
  familyMarker.setPosition(new google.maps.LatLng(newPos.lat, newPos.lng));
  // 同步更新路线
  updateRoute(myMarker.getPosition(), familyMarker.getPosition());
};

// 更新路线的函数
function updateRoute(start, end) {
  const directionsService = new google.maps.DirectionsService();
  const directionsRenderer = new google.maps.DirectionsRenderer({ map: map });
  
  directionsService.route({
    origin: start,
    destination: end,
    travelMode: google.maps.TravelMode.DRIVING,
  }, (response, status) => {
    if (status === "OK") {
      directionsRenderer.setDirections(response);
    }
  });
}

注意事项 #

• 开发时需要申请Google Maps API密钥，并且要注意API的调用配额和收费规则。
• 实时位置推送的频率要控制好，避免太频繁导致性能问题或者API费用超标。

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