基于Ionic @capacitor/google-maps实现出租车应用实时追踪导航的基础搭建求助

核心思路 #

通过持续监听设备位置更新，同步更新地图上的用户标记与行驶轨迹，可选实现地图跟随用户位置的功能，同时可结合Google Maps Directions API展示规划路线。

步骤1：初始化地图标记与轨迹路线 #

先创建用户位置标记（用自定义出租车图标）和行驶轨迹的折线图层：

// 初始化用户位置标记
this.userMarker = await this.newMap.addMarker({
  position: this.coordinates.coords,
  icon: {
    url: 'assets/taxi-icon.png', // 替换为你的出租车图标路径
    scaledSize: { width: 40, height: 40 }
  }
});

// 初始化行驶轨迹折线（可选，用于记录行驶路径）
this.routePolyline = await this.newMap.addPolyline({
  path: [this.coordinates.coords],
  strokeColor: '#2196F3',
  strokeWidth: 5
});

步骤2：启动实时位置监听 #

使用watchPosition替代单次的getCurrentPosition，持续获取位置更新并同步到地图：

// 启动位置监听，获取实时位置
this.watchId = Geolocation.watchPosition(
  (position) => {
    const newCoords = position.coords;
    
    // 更新用户标记的位置
    this.userMarker.setPosition(newCoords);
    
    // 更新行驶轨迹折线
    const currentPath = this.routePolyline.getPath();
    currentPath.push(newCoords);
    this.routePolyline.setPath(currentPath);
    
    // 可选：让地图中心自动跟随用户位置
    this.newMap.setCenter(newCoords);
  },
  (error) => {
    console.error('位置更新失败:', error.message);
  },
  {
    enableHighAccuracy: true, // 开启高精度定位
    maximumAge: 0, // 不使用缓存位置
    timeout: 5000 // 定位超时时间
  }
);

步骤3：清理监听（避免内存泄漏） #

在组件销毁或用户结束导航时，停止位置监听：

// 停止实时追踪的方法
stopTracking() {
  if (this.watchId) {
    Geolocation.clearWatch(this.watchId);
    this.watchId = null;
  }
}

// 示例：Angular组件销毁时调用
ngOnDestroy() {
  this.stopTracking();
}

步骤4：补充：展示起点到终点的规划路线（可选） #

调用Google Maps Directions API获取导航路线并渲染到地图：

// 获取并渲染规划路线
async renderPlannedRoute(startCoords, endCoords) {
  const directionsService = new google.maps.DirectionsService();
  const request = {
    origin: new google.maps.LatLng(startCoords.latitude, startCoords.longitude),
    destination: new google.maps.LatLng(endCoords.latitude, endCoords.longitude),
    travelMode: google.maps.TravelMode.DRIVING
  };

  directionsService.route(request, (result, status) => {
    if (status === google.maps.DirectionsStatus.OK) {
      new google.maps.DirectionsRenderer({
        map: this.newMap,
        directions: result,
        suppressMarkers: true // 隐藏默认路线标记，用自定义出租车标记替代
      });
    } else {
      console.error('路线获取失败:', status);
    }
  });
}

注意事项 #

• 权限配置：需确保App已申请位置权限（Android需ACCESS_FINE_LOCATION权限，iOS需在Info.plist中添加NSLocationWhenInUseUsageDescription说明）
• 性能优化：高频定位更新会增加耗电，可根据需求调整watchPosition的maximumAge参数（比如设为1000，允许使用1秒内的缓存位置）
• 自定义体验：替换出租车图标、调整轨迹线条颜色宽度，提升应用辨识度

内容的提问来源于stack exchange，提问作者DSP Cabs One way Drop taxi