vue中使用高德地图时报错AMap.Driving is not a constructor

如果在Vue项目中使用高德地图时遇到了“AMap.Driving is not a constructor”错误，这可能是因为您未正确引入Driving插件或引入方式不正确。

在Vue项目中使用高德地图，可以通过在main.js文件中引入高德地图API并注册为全局变量来实现全局使用。例如：

// main.js

import Vue from 'vue'
import App from './App.vue'

// 引入高德地图API
import AMap from 'AMap'

Vue.config.productionTip = false

// 注册高德地图API为全局变量
Vue.prototype.AMap = AMap

new Vue({
  render: h => h(App),
}).$mount('#app')

在上面的代码中，我们引入了高德地图API，并通过Vue.prototype将其注册为Vue的全局变量，使其在所有组件中可用。

然后，您可以在Vue组件中使用AMap对象和Driving类来计算路线并绘制路径。例如：

<template>
  <div id="mapContainer" style="height:500px"></div>
</template>

<script>
export default {
  data() {
    return {
      map: null,
      driving: null
    }
  },
  mounted() {
    // 初始化地图
    this.map = new this.AMap.Map('mapContainer', {
      center: [116.397428, 39.90923],
      zoom: 13
    });

    // 创建Driving对象
    this.driving = new this.AMap.Driving({
      map: this.map,
      panel: 'panel'
    });

    // 计算路线
    var points = [
      [116.379028, 39.865042],
      [116.414032, 39.865042],
      [116.414032, 39.899042],
      [116.379028, 39.899042]
    ];
    this.driving.search(points, (status, result) => {
      if (status === 'complete' && result.info === 'OK') {
        // 获取路线经纬度坐标数组
        var path = result.routes[0].path;

        // 创建Polyline对象绘制路径曲线
        var polyline = new this.AMap.Polyline({
          path: path,
          strokeColor: '#3366FF',
          strokeWeight: 5,
          strokeOpacity: 0.8
        });
        polyline.setMap(this.map);
      } else {
        alert('路线计算失败');
      }
    });
  }
}
</script>

在上面的代码中，我们在Vue组件的mounted生命周期函数中创建了地图和Driving对象，并计算了路线。请注意，我们使用Vue.prototype.AMap和this.AMap来访问全局的AMap对象，并使用this.AMap.Driving来访问Driving类。这样，您就可以在Vue项目中使用高德地图API，而不必担心“AMap.Driving is not a constructor”错误。