|
@@ -22,11 +22,15 @@
|
|
|
<view class="section">
|
|
|
<view class="section-title">工作地点</view>
|
|
|
<view class="map-container">
|
|
|
- <image class="map-image" src="https://data.qicai321.com/minlong/6be6ec51-d4a2-4f2b-9bfc-23e046a3db37.png" mode="aspectFill"></image>
|
|
|
- <!-- <view class="map-time">预计14:32到达</view> -->
|
|
|
- <view class="refresh-icon">
|
|
|
- <text class="iconfont icon-refresh"></text>
|
|
|
- </view>
|
|
|
+ <map
|
|
|
+ id="jobLocationMap"
|
|
|
+ class="map"
|
|
|
+ :latitude="mapInfo.latitude"
|
|
|
+ :longitude="mapInfo.longitude"
|
|
|
+ :markers="mapInfo.markers"
|
|
|
+ :scale="16"
|
|
|
+ ></map>
|
|
|
+ <!-- <view class="location-text">{{ jobDetail.location }}</view> -->
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
@@ -85,7 +89,12 @@ export default {
|
|
|
]
|
|
|
},
|
|
|
selectedJobId: null,
|
|
|
- jobId: null
|
|
|
+ jobId: null,
|
|
|
+ mapInfo: {
|
|
|
+ latitude: 0,
|
|
|
+ longitude: 0,
|
|
|
+ markers: []
|
|
|
+ }
|
|
|
}
|
|
|
},
|
|
|
onLoad(options) {
|
|
@@ -164,6 +173,9 @@ export default {
|
|
|
}
|
|
|
]
|
|
|
};
|
|
|
+
|
|
|
+ // 获取职位详情后,更新地图信息
|
|
|
+ this.updateMapLocation(data.data.location);
|
|
|
} else {
|
|
|
uni.showToast({
|
|
|
title: '获取职位详情失败',
|
|
@@ -315,6 +327,53 @@ export default {
|
|
|
|
|
|
// 处理普通字符串格式
|
|
|
return location;
|
|
|
+ },
|
|
|
+ // 更新地图位置信息
|
|
|
+ async updateMapLocation(location) {
|
|
|
+ try {
|
|
|
+ // 如果location是字符串数组,转换为地址字符串
|
|
|
+ let addressStr = '';
|
|
|
+ if (typeof location === 'string' && location.startsWith('[')) {
|
|
|
+ try {
|
|
|
+ const locationArray = JSON.parse(location.replace(/'/g, '"'));
|
|
|
+ addressStr = locationArray.join('');
|
|
|
+ } catch (e) {
|
|
|
+ addressStr = location;
|
|
|
+ }
|
|
|
+ } else if (Array.isArray(location)) {
|
|
|
+ addressStr = location.join('');
|
|
|
+ } else if (typeof location === 'object' && location !== null) {
|
|
|
+ const { province, city, district } = location;
|
|
|
+ addressStr = `${province || ''}${city || ''}${district || ''}`;
|
|
|
+ } else {
|
|
|
+ addressStr = location;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 使用微信小程序的地址解析接口
|
|
|
+ uni.request({
|
|
|
+ url: `https://apis.map.qq.com/ws/geocoder/v1/?address=${encodeURIComponent(addressStr)}&key=WJLBZ-SMQYZ-3RNX5-7J4LI-XTZD6-7IBZR`, // 需要替换为实际的地图Key
|
|
|
+ success: (res) => {
|
|
|
+ if (res.data.status === 0) {
|
|
|
+ const { lat, lng } = res.data.result.location;
|
|
|
+ this.mapInfo.latitude = lat;
|
|
|
+ this.mapInfo.longitude = lng;
|
|
|
+ this.mapInfo.markers = [{
|
|
|
+ id: 1,
|
|
|
+ latitude: lat,
|
|
|
+ longitude: lng,
|
|
|
+ title: addressStr
|
|
|
+ }];
|
|
|
+ } else {
|
|
|
+ console.error('地址解析失败:', res);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ fail: (err) => {
|
|
|
+ console.error('地址解析请求失败:', err);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ } catch (error) {
|
|
|
+ console.error('更新地图位置失败:', error);
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
|
@@ -406,13 +465,13 @@ export default {
|
|
|
overflow: hidden;
|
|
|
}
|
|
|
|
|
|
-.map-image {
|
|
|
+.map {
|
|
|
width: 100%;
|
|
|
- height: 300rpx;
|
|
|
+ height: 500rpx;
|
|
|
border-radius: 16rpx;
|
|
|
}
|
|
|
|
|
|
-.map-time {
|
|
|
+.location-text {
|
|
|
position: absolute;
|
|
|
left: 20rpx;
|
|
|
bottom: 20rpx;
|
|
@@ -423,19 +482,6 @@ export default {
|
|
|
border-radius: 6rpx;
|
|
|
}
|
|
|
|
|
|
-.refresh-icon {
|
|
|
- position: absolute;
|
|
|
- right: 20rpx;
|
|
|
- bottom: 20rpx;
|
|
|
- width: 60rpx;
|
|
|
- height: 60rpx;
|
|
|
- background-color: #fff;
|
|
|
- border-radius: 50%;
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
-}
|
|
|
-
|
|
|
.benefits-list {
|
|
|
display: flex;
|
|
|
flex-wrap: wrap;
|