86 lines
1.9 KiB
Vue
86 lines
1.9 KiB
Vue
<template>
|
|
<view id="amap" style="width: 100%; height: 100%" :points="points" :change:points="aMapRenderJs.receivePoints">
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: {
|
|
startPoint: {
|
|
type: Array,
|
|
default: () => [],
|
|
},
|
|
endPoint: {
|
|
type: Array,
|
|
default: () => [],
|
|
},
|
|
},
|
|
computed: {
|
|
points() {
|
|
console.log(this.startPoint, this.endPoint)
|
|
return {
|
|
startPoint: this.startPoint,
|
|
endPoint: this.endPoint
|
|
};
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<script module="aMapRenderJs" lang="renderjs">
|
|
const A_MAP_KEY = "4e96ffd5a5612a52c9caa25312ed9ace";
|
|
const A_MAP_SECRET_KEY = "4817909f57e07c7694c056a62bb39124";
|
|
|
|
export default {
|
|
mounted() {
|
|
if (typeof window.AMap === 'function') {
|
|
this.initAmap();
|
|
} else {
|
|
window._AMapSecurityConfig = {
|
|
securityJsCode: A_MAP_SECRET_KEY,
|
|
};
|
|
const script = document.createElement('script');
|
|
script.src = `https://webapi.amap.com/maps?v=1.4.15&key=${A_MAP_KEY}&plugin=AMap.Driving`;
|
|
|
|
script.onload = this.initAmap.bind(this);
|
|
document.head.appendChild(script);
|
|
}
|
|
},
|
|
methods: {
|
|
initAmap() {
|
|
const map = new AMap.Map('amap', {
|
|
resizeEnable: true,
|
|
});
|
|
// 开始绘画路径
|
|
const walking = new AMap.Driving({
|
|
map: map,
|
|
});
|
|
|
|
this.map = map;
|
|
this.walking = walking;
|
|
this.makeWalking();
|
|
},
|
|
makeWalking() {
|
|
if (!this.points.startPoint.length || !this.points.endPoint.length) {
|
|
return;
|
|
};
|
|
|
|
this.walking.search(
|
|
this.points.startPoint,
|
|
this.points.endPoint,
|
|
function(status, result) {
|
|
if (status === 'complete') {
|
|
console.log('绘制路线完成');
|
|
} else {
|
|
console.error('路线数据查询失败' + result);
|
|
}
|
|
}
|
|
);
|
|
},
|
|
receivePoints(newVal) {
|
|
console.log(`坐标更新：${JSON.stringify(newVal)}`);
|
|
this.makeWalking();
|
|
},
|
|
},
|
|
};
|
|
</script> |