You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
111 lines
2.3 KiB
111 lines
2.3 KiB
2 weeks ago
|
<template>
|
||
|
|
<view class="index-page">
|
||
|
|
<map style="height: 100vh; width: 100vw;" id="myMap" :markers="markers" show-location show-compass
|
||
|
|
@updated="handleMapLoad"></map>
|
||
|
|
<view class="rec-swiper">
|
||
|
|
<recruitment></recruitment>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
companyData: [{
|
||
|
|
label: '薪资',
|
||
|
|
value: '20',
|
||
|
|
unit: '',
|
||
|
|
exLabel: '元/小时'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
label: '年龄',
|
||
|
|
value: '20-42',
|
||
|
|
unit: '',
|
||
|
|
exLabel: '元/小时'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
label: '吃饭',
|
||
|
|
value: '2',
|
||
|
|
unit: '餐',
|
||
|
|
exLabel: '白-夜'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
label: '住宿',
|
||
|
|
value: '20',
|
||
|
|
unit: '',
|
||
|
|
exLabel: '人间'
|
||
|
|
},
|
||
|
|
],
|
||
|
|
markers: [{
|
||
|
|
id: 1,
|
||
|
|
latitude: 39.90923,
|
||
|
|
longitude: 116.397428,
|
||
|
|
title: '模拟点位1',
|
||
|
|
iconPath: '/static/position-icon.png',
|
||
|
|
width: 30,
|
||
|
|
height: 30,
|
||
|
|
label: {
|
||
|
|
content: '模拟点位1',
|
||
|
|
textAlign: 'center',
|
||
|
|
fontSize: 18,
|
||
|
|
}
|
||
|
|
},
|
||
|
|
{
|
||
|
|
id: 2,
|
||
|
|
latitude: 39.8,
|
||
|
|
longitude: 116.3,
|
||
|
|
title: '模拟点位1',
|
||
|
|
iconPath: '/static/position-icon.png',
|
||
|
|
width: 30,
|
||
|
|
height: 30,
|
||
|
|
label: {
|
||
|
|
content: '模拟点位1',
|
||
|
|
textAlign: 'center',
|
||
|
|
fontSize: 18,
|
||
|
|
}
|
||
|
|
},
|
||
|
|
]
|
||
|
|
}
|
||
|
|
},
|
||
|
|
onLoad() {
|
||
|
|
// 页面加载时的初始化逻辑
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
handleMapLoad() {
|
||
|
|
console.log('地图加载完成');
|
||
|
|
// 获取地图上下文
|
||
|
|
const mapContext = uni.createMapContext('myMap');
|
||
|
|
// 设置地图中心点到第一个标记点
|
||
|
|
mapContext.includePoints({
|
||
|
|
points: this.markers.map(marker => ({
|
||
|
|
latitude: marker.latitude,
|
||
|
|
longitude: marker.longitude
|
||
|
|
})),
|
||
|
|
padding: [50, 50, 200, 50] // 边距设置
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss">
|
||
|
|
.index-page {
|
||
|
|
height: 100vh;
|
||
|
|
overflow: hidden;
|
||
|
|
position: relative;
|
||
|
|
|
||
|
|
.rec-swiper {
|
||
|
|
width: calc(100% - 16px);
|
||
|
|
// height: 200px;
|
||
|
|
// background-color: red;
|
||
|
|
background-color: #FFF;
|
||
|
|
margin: 0 8px;
|
||
|
|
position: absolute;
|
||
|
|
left: 0px;
|
||
|
|
bottom: 8px;
|
||
|
|
border-radius: 16px;
|
||
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|