Răsfoiți Sursa

添加地图

yangg 11 ore în urmă
părinte
comite
37f47cd6cf
1 a modificat fișierele cu 68 adăugiri și 22 ștergeri
  1. 68 22
      pages/job-detail/job-detail.vue

+ 68 - 22
pages/job-detail/job-detail.vue

@@ -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;