怎样操作Vue做出高德地图搭建实时公交应用.doc

《怎样操作Vue做出高德地图搭建实时公交应用》

在智慧城市建设的浪潮中，实时公交应用成为提升公共交通效率的重要工具。本文将详细介绍如何基于Vue.js框架结合高德地图API，开发一个具备实时公交位置展示、线路规划、到站提醒等功能的Web应用。通过完整的开发流程和代码示例，帮助开发者快速掌握核心实现技术。

一、技术选型与前期准备

1.1 技术栈选择

前端框架：Vue 3（Composition API）

地图服务：高德地图JavaScript API（v2.x）

实时数据：高德公交实时数据接口

UI组件库：Element Plus（可选）

状态管理：Pinia（可选）

1.2 高德开发者账号申请

访问高德开放平台（https://lbs.amap.com/），注册开发者账号并创建应用，获取Web端JavaScript API的Key。注意需要申请Web服务的Key，并确保已开通公交数据相关服务权限。

1.3 项目初始化


# 使用Vite创建Vue项目
npm create vite@latest bus-map -- --template vue
cd bus-map
npm install
# 安装Element Plus和Pinia（可选）
npm install element-plus @element-plus/icons-vue pinia

二、地图基础功能实现

2.1 地图组件封装

创建MapContainer.vue组件，封装高德地图初始化逻辑：

2.2 地图交互功能

添加缩放控制、拖拽缩放等基础交互：


// 在onMounted的地图初始化后添加
const toolbar = new AMap.ControlBar({
  position: {
    right: '10px',
    top: '10px'
  }
})
map.value.addControl(toolbar)

三、实时公交数据获取与处理

3.1 高德公交API调用

创建api/bus.js封装数据请求：


import axios from 'axios'

const instance = axios.create({
  baseURL: 'https://restapi.amap.com/v5/bus',
  params: {
    key: '您的高德Key'
  }
})

export const getBusLines = (city, keywords) => {
  return instance.get('/busline', {
    params: {
      city,
      keywords,
      output: 'JSON'
    }
  })
}

export const getBusRealtime = (id) => {
  return instance.get('/busline', {
    params: {
      id,
      output: 'JSON'
    }
  })
}

3.2 公交数据解析

处理高德返回的JSON数据，提取关键信息：


export const parseBusData = (data) => {
  if (!data || !data.buslines) return []
  return data.buslines.map(line => ({
    id: line.id,
    name: line.name,
    startTime: line.basic_info?.starttime,
    endTime: line.basic_info?.endtime,
    polyline: line.bounds.split(';').map(point => 
      point.split(',').map(Number)
    ),
    stations: line.via_stops.map(stop => ({
      name: stop.name,
      location: [stop.location.split(',')[0], stop.location.split(',')[1]]
    }))
  }))
}

四、核心功能实现

4.1 公交线路搜索

创建SearchBus.vue组件实现搜索功能：

4.2 公交线路绘制

在MapContainer中添加绘制方法：


// 在script中添加
const drawBusLine = (polyline, stations) => {
  if (!map.value) return
  
  // 清除已有覆盖物
  map.value.clearMap()
  
  // 绘制公交线路
  const path = new AMap.Polyline({
    path: polyline,
    isOutline: true,
    borderWeight: 2,
    strokeColor: '#3366FF',
    strokeWeight: 5,
    strokeStyle: 'solid',
    strokeOpacity: 0.8
  })
  map.value.add(path)
  
  // 绘制站点标记
  stations.forEach((station, index) => {
    const marker = new AMap.Marker({
      position: station.location,
      content: createStationContent(station.name, index),
      offset: new AMap.Pixel(-15, -15)
    })
    map.value.add(marker)
  })
}

const createStationContent = (name, index) => {
  return `
    
      ${index + 1}
    
  `
}

4.3 实时位置追踪

实现WebSocket实时数据推送（模拟实现）：


// 在api/bus.js中添加
export const getBusRealtimeWS = (id, callback) => {
  // 实际开发中应使用WebSocket
  // 这里模拟定时获取数据
  let interval = setInterval(async () => {
    try {
      const res = await getBusRealtime(id)
      const data = res.data
      if (data.buses && data.buses.length > 0) {
        callback(data.buses[0])
      }
    } catch (error) {
      console.error('实时数据获取失败:', error)
    }
  }, 3000)
  
  return () => clearInterval(interval)
}

在组件中使用：


// 在showBusLine方法中
const showBusLine = async (id) => {
  try {
    const res = await getBusLines('北京', '')
    const allLines = parseBusData(res.data)
    const targetLine = allLines.find(line => line.id === id)
    
    if (targetLine) {
      drawBusLine(targetLine.polyline, targetLine.stations)
      
      // 开始实时追踪
      const cancel = getBusRealtimeWS(id, (busData) => {
        updateBusPosition(busData)
      })
      
      // 组件卸载时取消
      onBeforeUnmount(() => cancel())
    }
  } catch (error) {
    console.error('线路展示失败:', error)
  }
}

const updateBusPosition = (busData) => {
  if (!map.value) return
  
  // 清除旧标记
  const oldMarker = map.value.getAllOverlays('marker').find(m => 
    m.getContent()?.includes('bus-marker')
  )
  if (oldMarker) map.value.remove(oldMarker)
  
  // 添加新标记
  const marker = new AMap.Marker({
    position: [busData.longitude, busData.latitude],
    content: createBusMarkerContent(busData.direction),
    offset: new AMap.Pixel(-15, -15)
  })
  map.value.add(marker)
  
  // 移动视角到车辆位置
  map.value.setCenter([busData.longitude, busData.latitude])
}

const createBusMarkerContent = (direction) => {
  return `
    
      
        🚌
      
    
  `
}

五、进阶功能实现

5.1 到站提醒功能


// 在updateBusPosition中添加
const notifyStation = (currentPos, stations) => {
  // 简单距离计算（实际应使用球面距离算法）
  const isNearStation = stations.some((station, index) => {
    const dist = getDistance(
      currentPos[0], currentPos[1],
      station.location[0], station.location[1]
    )
    return dist  {
  // 简化版距离计算（实际应使用Haversine公式）
  return Math.sqrt(Math.pow(lon1 - lon2, 2) + Math.pow(lat1 - lat2, 2)) * 111000
}

5.2 多线路对比功能


// 在SearchBus.vue中添加多选功能
const selectedLines = ref([])

const showMultipleLines = () => {
  selectedLines.value.forEach(id => {
    // 为每条线路创建独立的绘制逻辑
    // ...
  })
}

六、性能优化与部署

6.1 地图资源优化

按需加载地图插件
使用WebWorker处理复杂计算
实现数据缓存机制

6.2 部署配置


// vite.config.js
export default defineConfig({
  // ...
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          vendor: ['vue', 'element-plus'],
          map: ['@amap/amap-jsapi-loader']
        }
      }
    }
  }
})