更新记录

1.0.0（2026-03-24）

地图图路线迹，支持高德，百度，腾讯路线轨迹，调用api自动画线 vue3版本

平台兼容性

uni-app(3.99)

<template>
  <view>
    <!-- 地图组件 -->
    <map 
      :latitude="map.latitude" 
      :longitude="map.longitude" 
      :markers="map.markers"
      :polyline="map.polyline"
      :scale="map.scale"
      style="width: 100%; height: 500rpx;"
    />

    <!-- 路线规划组件 -->
    <route-planning ref="routeRef" />

    <button @click="drawRoute">规划路线</button>
  </view>
</template>

<script setup>
import { ref, reactive } from 'vue'
import routePlanning from '@/uni_modules/route-planning/components/route-planning/route-planning.vue'

const routeRef = ref(null)

// 地图数据
const map = reactive({
  latitude: 30.923396,
  longitude: 121.478823,
  markers: [
      {
                    latitude: 30.923396,
                     longitude: 121.478823,
                    iconPath: '/static/logo.png'
                }, {
                    latitude: 30.915852, 
                    longitude: 121.512345,
                    iconPath: '/static/logo.png'
                }
  ],
  polyline: [],
  scale: 15
})

// 绘制路线
const drawRoute = async () => {
  // 设置高德Key
  routeRef.value.setKey('您的key')

  // 起点和终点
  const origin = { latitude: 30.923396, longitude: 121.478823,  }
  const destination = { latitude: 30.915852, longitude: 121.512345,  }

  // 路线样式
  const lineOptions = {
    arrowLine: true,
    points: [],
    color: '#22ac38',
    width: 10
  }

  // 绘制
  await routeRef.value.drawRoute(map, origin, destination, lineOptions)
}
</script>