vue 高德地图根据点坐标绘制路线

在Vue中使用高德地图（AMap）根据点坐标绘制路线，你可以按照以下步骤操作：

1. 首先，在项目中安装高德地图组件：如果你使用的是Vue CLI项目，可以在`main.js`中引入并配置高德地图API。

import AMap from 'vue-amap';

Vue.use(AMap);
AMap.initAMapApiLoader({
  key: 'your_amap_key', // 将此处替换为你的高德地图API Key
  version: '1.4.16', // 或者最新版本
});

2. 创建地图实例并绑定到Vue组件上：

<template>
  <div id="map">
    <amap-map :zoom="zoom" :center="center">
      <amap-polyline :points="routePoints" :polyline-options="{color: '#FF0000'}"></amap-polyline> <!-- 根据需要显示路线 -->
    </amap-map>
  </div>
</template>

<script>
export default {
  data() {
    return {
      zoom: 15,
      center: [116.39, 39.9], // 北京坐标
      routePoints: [], // 存放路径点的数组，每个点是一个包含经度和纬度的对象
    };
  },
  created() {
    this.getRoute(); // 初始化获取路线数据
  },
  methods: {
    getRoute() { // 获取路线并填充routePoints
      // 使用高德地图的路线规划服务 API，这里仅作示例，实际应用需要替换为你的真实请求逻辑
      const service = new AMap.Routing();
      service.search('起点地址', '终点地址', {
        mode: 'Driving', // 路线模式，默认为驾车
        onSearchComplete: (result) => {
          if (result && result.routes && result.routes[0]) {
            result.routes[0].paths.forEach(path => {
              this.routePoints.push({ lng: path[0][1], lat: path[0][0] });
            });
          }
        },
      });
    },
  },
};
</script>

3. 当你需要更新路线时，比如用户输入新的起点和终点，可以在相应方法中调用`getRoute`方法来刷新路线。