176 lines
2.7 KiB
Vue
176 lines
2.7 KiB
Vue
|
<template>
|
||
|
|
<view>
|
||
|
|
|
||
|
|
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
|
||
|
|
|
||
|
|
export default {
|
||
|
|
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
|
||
|
|
mounted() {
|
||
|
|
const ttAMapNavi = uni.requireNativePlugin('TT-AMapNavi');
|
||
|
|
// 传入高德地图key
|
||
|
|
ttAMapNavi.initParams({
|
||
|
|
androidKey: 'bbf571cadf2782f69f0eb373d516b4e0',
|
||
|
|
iOSKey: ''
|
||
|
|
});
|
||
|
|
// 开始导航，传入的坐标均为高德坐标系
|
||
|
|
ttAMapNavi.startNavi({
|
||
|
|
// 起点（只支持传入一个），选填，不传使用当前位置
|
||
|
|
startPoints: [{
|
||
|
|
name: '起点名称',
|
||
|
|
latitude: 39.993135,
|
||
|
|
longitude: 116.474175
|
||
|
|
}],
|
||
|
|
// 终点（只支持传入一个）
|
||
|
|
endPoints: [{
|
||
|
|
name: '终点名称',
|
||
|
|
latitude: 39.908791,
|
||
|
|
longitude: 116.321257
|
||
|
|
}],
|
||
|
|
// 途径点（最多支持三个），选填
|
||
|
|
wayPoints: [],
|
||
|
|
// 驾车路径规划策略
|
||
|
|
drivingStrategy: 10,
|
||
|
|
// 是否直接进入导航界面（跳过路径规划页面）
|
||
|
|
naviDirectly: false,
|
||
|
|
// 导航组件的主题皮肤类型
|
||
|
|
themeType: 1
|
||
|
|
});
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang='scss' scoped>
|
||
|
|
.cover {
|
||
|
|
position: absolute;
|
||
|
|
top: 0;
|
||
|
|
left: 0;
|
||
|
|
width: 100vw;
|
||
|
|
height: 100vh;
|
||
|
|
background-color: rgba(#000, 0.3);
|
||
|
|
|
||
|
|
.cover_model {
|
||
|
|
position: absolute;
|
||
|
|
top: 50%;
|
||
|
|
left: 50%;
|
||
|
|
transform: translate(-50%, -50%);
|
||
|
|
width: 650rpx;
|
||
|
|
/* height: 300rpx; */
|
||
|
|
background-color: #fff;
|
||
|
|
border-radius: 6px;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
justify-content: space-between;
|
||
|
|
|
||
|
|
.model_title {
|
||
|
|
height: 92rpx;
|
||
|
|
line-height: 92rpx;
|
||
|
|
text-align: center;
|
||
|
|
font-size: 16px;
|
||
|
|
font-weight: bold;
|
||
|
|
}
|
||
|
|
|
||
|
|
.model_content {
|
||
|
|
margin: 12px 25px 25px 25px;
|
||
|
|
font-size: 15px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.model_btn {
|
||
|
|
display: flex;
|
||
|
|
height: 96rpx;
|
||
|
|
font-size: 16px;
|
||
|
|
|
||
|
|
.item {
|
||
|
|
flex: 1;
|
||
|
|
text-align: center;
|
||
|
|
line-height: 96rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.model_confirm {
|
||
|
|
color: #0122c7;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.red {
|
||
|
|
color: #ff0000;
|
||
|
|
}
|
||
|
|
|
||
|
|
.green {
|
||
|
|
color: #40bc5e;
|
||
|
|
}
|
||
|
|
|
||
|
|
.yellow {
|
||
|
|
color: #ff7c32;
|
||
|
|
}
|
||
|
|
|
||
|
|
.custom-map /deep/ .polyline {
|
||
|
|
stroke-width: 20px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.content {
|
||
|
|
|
||
|
|
background-color: #F5F5F5;
|
||
|
|
height: 100vh;
|
||
|
|
box-sizing: border-box;
|
||
|
|
}
|
||
|
|
|
||
|
|
.map {
|
||
|
|
height: 100vh;
|
||
|
|
border-radius: 2vw;
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
|
||
|
|
.map_address {
|
||
|
|
background-color: white;
|
||
|
|
padding: 20rpx 10rpx;
|
||
|
|
border-radius: 0 0 14rpx 14rpx;
|
||
|
|
|
||
|
|
.li {
|
||
|
|
margin: 20rpx 0;
|
||
|
|
line-height: 40rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.cir {
|
||
|
|
display: inline-block;
|
||
|
|
width: 2vw;
|
||
|
|
height: 2vw;
|
||
|
|
border-radius: 2vw;
|
||
|
|
margin: 0 20rpx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.map_btn {
|
||
|
|
width: 50px;
|
||
|
|
height: 50px;
|
||
|
|
position: absolute;
|
||
|
|
bottom: 0px;
|
||
|
|
right: 0;
|
||
|
|
z-index: 9999999;
|
||
|
|
}
|
||
|
|
|
||
|
|
.btn {
|
||
|
|
|
||
|
|
position: fixed;
|
||
|
|
bottom: 20rpx;
|
||
|
|
width: 90vw;
|
||
|
|
left: 50%;
|
||
|
|
transform: translateX(-50%);
|
||
|
|
|
||
|
|
}
|
||
|
|
</style>
|