151 lines
3.5 KiB
Vue
151 lines
3.5 KiB
Vue
<template>
|
||
<view class="">
|
||
<view id="amap" lang='en' style="width: 100%; height: 100vh" :points="points"
|
||
:change:points="aMapRenderJs.receivePoints">
|
||
</view>
|
||
</view>
|
||
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
props: {
|
||
startPoint: {
|
||
type: Array,
|
||
default: () => [],
|
||
},
|
||
endPoint: {
|
||
type: Array,
|
||
default: () => [],
|
||
},
|
||
},
|
||
created() {
|
||
uni.setLocale("en")
|
||
},
|
||
computed: {
|
||
points() {
|
||
return {
|
||
startPoint: this.startPoint,
|
||
endPoint: this.endPoint
|
||
};
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<script module="aMapRenderJs" lang="renderjs">
|
||
const A_MAP_KEY = "c8c2a57b0d9c9b2e775c97054c9ef2a1";
|
||
const A_MAP_SECRET_KEY = "7e06f7ba264cb486d5d6209032e4c6b6";
|
||
import config from '@/config'
|
||
export default {
|
||
mounted() {
|
||
uni.setLocale("en")
|
||
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.Walking`;
|
||
script.onload = this.initAmap.bind(this);
|
||
document.head.appendChild(script);
|
||
}
|
||
},
|
||
methods: {
|
||
initAmap() {
|
||
uni.setLocale("en")
|
||
|
||
|
||
const map = new AMap.Map('amap', {
|
||
lang: "en",
|
||
resizeEnable: true,
|
||
});
|
||
let that =this
|
||
setTimeout(function() {
|
||
|
||
|
||
// 开始绘画路径
|
||
const walking = new AMap.Walking({
|
||
map: map,
|
||
hideMarkers:true
|
||
});
|
||
var startIcon = new AMap.Icon({
|
||
// 图标尺寸
|
||
size: new AMap.Size(20, 20),
|
||
// 图标的取图地址
|
||
image: "http://47.94.122.58:83/userPhoto.png",
|
||
// 图标所用图片大小
|
||
imageSize: new AMap.Size(20, 18),
|
||
});
|
||
const marker = new AMap.Marker({
|
||
position:that.startPoint ,// 设置点位经纬度，new this.AMap.LngLat
|
||
icon: startIcon,
|
||
}) // 创建点位
|
||
map.add(marker)
|
||
that.map = map;
|
||
that.walking = walking;
|
||
that.makeWalking();
|
||
|
||
}, 500);
|
||
|
||
},
|
||
makeWalking() {
|
||
|
||
console.log( "123", this.points);
|
||
// 创建起始点标记
|
||
const startMarker = new AMap.Marker({
|
||
position: this.points.startPoint,
|
||
icon: new AMap.Icon({
|
||
image: config.startIcon, // 替换为你自己的起始点图标路径
|
||
size: new AMap.Size(32, 32),
|
||
imageSize: new AMap.Size(18, 22),
|
||
}),
|
||
});
|
||
startMarker.setMap(this.map);
|
||
|
||
// 创建终点标记
|
||
const endMarker = new AMap.Marker({
|
||
position: this.points.endPoint,
|
||
icon: new AMap.Icon({
|
||
image: config.markIcon, // 替换为你自己的终点图标路径
|
||
size: new AMap.Size(32, 32),
|
||
imageSize: new AMap.Size(18, 18),
|
||
}),
|
||
});
|
||
endMarker.setMap(this.map);
|
||
if(this.walking){
|
||
this.walking.search(
|
||
this.points.startPoint,
|
||
this.points.endPoint,
|
||
function(status, result) {
|
||
if (status === 'complete') {
|
||
console.log('绘制步行路线完成');
|
||
} else {
|
||
uni.showToast({
|
||
title: 'The distance is too long and the walking route planning fails',
|
||
icon:'none'
|
||
});
|
||
console.error('步行路线数据查询失败' + result);
|
||
}
|
||
}
|
||
);
|
||
}
|
||
|
||
|
||
},
|
||
receivePoints(newVal) {
|
||
console.log(`坐标更新：${JSON.stringify(newVal)}`);
|
||
this.makeWalking();
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
<style>
|
||
::v-deep .amap-logo {
|
||
opacity: 0 !important;
|
||
}
|
||
::v-deep .amap-copyright {
|
||
opacity: 0 !important;
|
||
}
|
||
</style> |