高德地图路径规划功能

原创于 2025-05-26 13:01:58 发布 · 1.8k 阅读

12 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端

前端专栏收录该内容

52 篇文章

订阅专栏

在基于 Vue 和高德地图开发地理信息系统时，除了基础的地图展示和标点功能，路径规划是一个常见的扩展需求。本文将结合实际项目场景，分享如何在现有组件中快速集成高德地图的驾车路线规划功能。

一、功能需求与实现思路

需求背景

原有组件已实现地图加载、用户足迹标记和弹窗展示。现在需要新增驾车路线规划功能，支持：

通过点击地图标记点或地图任意位置设置起点 / 终点
显示详细的路线信息（距离、时间、转向指引等）
支持路径清除和重新规划

核心思路

插件引入：使用高德地图 JavaScript API 中的AMap.Driving插件实现路线计算
交互设计：通过按钮切换起点 / 终点设置模式，点击地图触发点位选择
状态管理：使用 Vue 响应式变量跟踪起点 / 终点状态、规划结果
UI 扩展：新增路径规划控制栏

二、关键代码实现步骤

1. 新增路径规划控制栏

在原有搜索栏下方添加操作按钮，通过动态样式反馈当前模式：

<!-- 路径规划控制区域 -->
      <a-form style="height: 50px; margin-top: 10px">
        <a-flex>
          <div style="width: 150px; font-size: 20px">路径规划：</div>
          <a-form-item>
            <a-space>
              <a-button
                :style="{
                  'border-radius': '0',
                  'width': '80px',
                  'height': '40px',
                  'padding': '4px',
                  'background': startPoint ? '#21b47c' : '#ffffff',
                  'color': startPoint ? '#ffffff' : '#000000'
                }"
                @click="setMode('start')"
                >起点</a-button
              >
              <a-button
                :style="{
                  'border-radius': '0',
                  'width': '80px',
                  'height': '40px',
                  'padding': '4px',
                  'background': endPoint ? '#21b47c' : '#ffffff',
                  'color': endPoint ? '#ffffff' : '#000000'
                }"
                @click="setMode('end')"
                >终点</a-button
              >
              <a-button
                style="
                  border-radius: 0;
                  width: 80px;
                  height: 40px;
                  padding: 4px;
                  background: #21b47c;
                  color: #ffffff;
                "
                @click="showRoute"
                :disabled="!startPoint || !endPoint"
                >显示路径</a-button
              >
              <a-button
                style="border-radius: 0; width: 80px; height: 40px; padding: 4px"
                @click="clearRoute"
                >清除路径</a-button
              >
            </a-space>
          </a-form-item>
          <div style="font-size: 16px; color: #21b47c; margin-left: 20px;">
            {{ routeStatus }}
          </div>
        </a-flex>
      </a-form>

2. 初始化路径规划插件

在地图初始化时加载AMap.Driving插件，并绑定点击事件处理点位选择：

const initMap = async () => {
  // ... 原有地图初始化代码 ...
  
  // 初始化驾车导航插件
  driving.value = new AMap.Driving({
    map: mapInstance.value, // 绑定地图实例
    panel: 'panel' // 绑定路线详情面板
  });

  // 地图点击事件：设置起点/终点
  mapInstance.value.on('click', (e) => {
    if (currentMode.value === 'start') {
      startPoint.value = e.lnglat;
      drawPointMarker(startPoint.value, 'start'); // 绘制起点标记
      routeStatus.value = '起点已设置，选择终点';
      currentMode.value = null;
    } else if (currentMode.value === 'end') {
      endPoint.value = e.lnglat;
      drawPointMarker(endPoint.value, 'end'); // 绘制终点标记
      routeStatus.value = '终点已设置，点击计算路线';
      currentMode.value = null;
    }
  });
};

3. 点位标记与样式优化

使用不同图标区分起点 / 终点，并支持点击足迹标记快速设置点位：

// 绘制起点/终点标记
const drawPointMarker = (position, type) => {
  // 清除之前的标记
  const markers = mapInstance.value.getAllOverlays('marker')
  markers.forEach(marker => {
    if (marker.getExtData() === type) {
      marker.setMap(null)
    }
  })
  
  // 创建新标记
  const marker = new AMap.Marker({
    position: position,
    icon: type === 'start' 
      ? 'https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png' 
      : 'https://webapi.amap.com/theme/v1.3/markers/n/mark_r.png',
    extData: type // 存储标记类型
  })
  
  marker.setMap(mapInstance.value)
}


const markPoints = (map) => {
  mapData.value.forEach((item) => {
    const marker = new AMap.Marker({
      position: new AMap.LngLat(item.longitude, item.latitude)
    })
    map.add(marker)

    marker.on('click', (e) => {
      setInfoWindows(map, e, item, true)
      
      // 如果处于设置起点或终点的模式下，使用该点作为起点或终点
      if (currentMode.value === 'start') {
        startPoint.value = new AMap.LngLat(item.longitude, item.latitude)
        routeStatus.value = '起点已设置，现在请选择终点'
        currentMode.value = null
        drawPointMarker(startPoint.value, 'start')
      } else if (currentMode.value === 'end') {
        endPoint.value = new AMap.LngLat(item.longitude, item.latitude)
        routeStatus.value = '终点已设置，点击"显示路径"按钮查看路线'
        currentMode.value = null
        drawPointMarker(endPoint.value, 'end')
      }
    })
  })
}


// 设置当前模式（起点或终点）
const setMode = (mode) => {
  currentMode.value = mode
  if (mode === 'start') {
    routeStatus.value = '请选择起点位置'
  } else {
    routeStatus.value = '请选择终点位置'
  }
}

4. 路线计算与清除逻辑

核心业务逻辑封装在showRoute和clearRoute方法中：

// 显示路径
const showRoute = () => {
  if (!startPoint.value || !endPoint.value) {
    message.error('请先设置起点和终点')
    return
  }
  
  // 调用驾车导航服务
  driving.value.search(startPoint.value, endPoint.value, function(status, result) {
    if (status === 'complete') {
      routeStatus.value = '路径规划完成'
      console.log('路径规划结果:', result)
    } else {
      routeStatus.value = '路径规划失败'
      console.error('获取驾车数据失败：', result)
      message.error('路径规划失败，请重试')
    }
  })
}

// 清除路径
const clearRoute = () => {
  // 清除路径显示
  driving.value.clear()
  
  // 清除起点和终点标记
  const markers = mapInstance.value.getAllOverlays('marker')
  markers.forEach(marker => {
    if (marker.getExtData() === 'start' || marker.getExtData() === 'end') {
      marker.setMap(null)
    }
  })
  
  // 重置状态
  startPoint.value = null
  endPoint.value = null
  currentMode.value = null
  routeStatus.value = '请选择起点和终点'
}