如果在
Vue项目中
使用高德地图时遇到了“A
Map.Driving is not a constructor”错误，这可能是因为您未正确引入Driving插件或引入方式不正确。
在
Vue项目中
使用高德地图，可以通过在main.js文件中引入
高德地图API并注册为全局变量来实现全局
使用。例如：
```
javascript
// main.js
import
Vue from '
vue'
import App from './App.
vue'
// 引入
高德地图API
import A
Map from 'A
Map'
Vue.config.productionTip = false
// 注册
高德地图API为全局变量
Vue.prototype.A
Map = A
Map
new
Vue({
render: h => h(App),
}).$mount('#app')
```
在上面的代码中，我们引入了
高德地图API，并通过
Vue.prototype将其注册为
Vue的全局变量，使其在所有组件中可用。
然后，您可以在
Vue组件中
使用A
Map对象和Driving类来计算路线并绘制路径。例如：
```
javascript
<template>
<div id="
mapContainer" style="height:500px"></div>
</template>
<script>
export default {
data() {
return {
map: null,
driving: null
}
},
mounted() {
// 初始化
地图
this.
map = new this.A
Map.
Map('
mapContainer', {
center: [116.397428, 39.90923],
zoom: 13
});
// 创建Driving对象
this.driving = new this.A
Map.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.A
Map.Polyline({
path: path,
strokeColor: '#3366FF',
strokeWeight: 5,
strokeOpacity: 0.8
});
polyline.
setMap(this.
map);
} else {
alert('路线计算失败');
}
});
}
}
</script>
```
在上面的代码中，我们在
Vue组件的mounted生命周期函数中创建了
地图和Driving对象，并计算了路线。请注意，我们
使用Vue.prototype.A
Map和this.A
Map来访问全局的A
Map对象，并
使用this.A
Map.Driving来访问Driving类。这样，您就可以在
Vue项目中
使用高德地图API，而不必担心“A
Map.Driving is not a constructor”错误。
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
