如何在配送应用中使用Google Maps路线预览功能？

Google My Maps并不适合应用集成场景，要实现类似Instacart的路线预览，你需要使用Google Maps Platform的官方API组合，以下是具体实现步骤：

1. 前期准备（Google Cloud配置） #

• 注册Google Cloud账号并创建项目
• 在Google Cloud控制台启用两个核心服务：
  • Directions API：用于获取路线的坐标、耗时、距离等数据
  • 对应平台的Maps SDK（Android Maps SDK / iOS Maps SDK / Maps JavaScript API）：用于在应用内渲染地图和路线
• 创建API密钥，并设置使用限制（比如绑定应用包名、域名），避免密钥被滥用

2. 获取路线数据（调用Directions API） #

通过Directions API请求路线数据，核心参数包括起点、终点、出行方式（驾车/步行/公交等）。

示例HTTP请求（以JSON格式返回）：

GET https://maps.googleapis.com/maps/api/directions/json?origin=37.7749,-122.4194&destination=37.3382,-121.8863&mode=driving&key=你的API密钥

返回结果中重点关注：

• routes[0].overview_polyline.points：路线的压缩坐标字符串，用于后续渲染
• routes[0].legs[0].distance、routes[0].legs[0].duration：路线的距离和预计耗时

3. 在应用内渲染路线预览 #

根据你的应用平台，选择对应方式渲染路线：

Web应用（Maps JavaScript API） #

// 初始化地图
const map = new google.maps.Map(document.getElementById("map-container"), {
  zoom: 10,
  center: { lat: 37.7749, lng: -122.4194 }, // 起点坐标
  mapTypeId: "roadmap"
});

// 解析polyline坐标
const polylinePoints = google.maps.geometry.encoding.decodePath(
  "获取到的overview_polyline.points字符串"
);

// 添加路线折线到地图
const routeLine = new google.maps.Polyline({
  path: polylinePoints,
  strokeColor: "#2563EB", // 自定义路线颜色
  strokeOpacity: 0.9,
  strokeWeight: 5,
  map: map
});

// 添加起点、终点标记
new google.maps.Marker({
  position: { lat: 37.7749, lng: -122.4194 },
  map: map,
  title: "起点"
});

new google.maps.Marker({
  position: { lat: 37.3382, lng: -121.8863 },
  map: map,
  title: "终点"
});

Android应用（Google Maps Android SDK） #

// 在MapFragment/MapView的回调中初始化地图
val map = googleMap ?: return

// 解析polyline
val polylineOptions = PolylineOptions()
val decodedPoints = PolyUtil.decode("获取到的overview_polyline.points字符串")
polylineOptions.addAll(decodedPoints)
  .color(Color.parseColor("#2563EB"))
  .width(12f)

// 添加路线到地图
map.addPolyline(polylineOptions)

// 添加标记
map.addMarker(MarkerOptions().position(LatLng(37.7749, -122.4194)).title("起点"))
map.addMarker(MarkerOptions().position(LatLng(37.3382, -121.8863)).title("终点"))

// 调整地图视角
map.moveCamera(CameraUpdateFactory.newLatLngBounds(LatLngBounds.builder().apply {
  include(LatLng(37.7749, -122.4194))
  include(LatLng(37.3382, -121.8863))
}.build(), 100))

iOS应用（Google Maps iOS SDK） #

// 初始化地图视图
let mapView = GMSMapView(frame: view.bounds)
mapView.camera = GMSCameraPosition.camera(withLatitude: 37.7749, longitude: -122.4194, zoom: 10)
view.addSubview(mapView)

// 解析polyline
let path = GMSPath(fromEncodedPath: "获取到的overview_polyline.points字符串")
let polyline = GMSPolyline(path: path)
polyline.strokeColor = UIColor(named: "#2563EB")
polyline.strokeWidth = 5.0
polyline.map = mapView

// 添加标记
GMSMarker(position: CLLocationCoordinate2D(latitude: 37.7749, longitude: -122.4194)).map = mapView
GMSMarker(position: CLLocationCoordinate2D(latitude: 37.3382, longitude: -121.8863)).map = mapView

4. 优化体验（贴近Instacart的细节） #

• 显示路线的预计耗时、距离信息
• 支持切换出行方式（驾车/步行/配送货车等）
• 开启实时路况层（Traffic Layer），展示实时交通状况
• 适配不同屏幕尺寸，确保路线预览在移动端清晰可见

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