diff --git a/api/map.js b/api/map.js
index 25db316..d312e50 100644
--- a/api/map.js
+++ b/api/map.js
@@ -59,4 +59,10 @@ export const querySearch = (keyword, key) => {
                 reject(err)
             })
     })
-}
\ No newline at end of file
+}
+
+export const geQueryJobsByNearby = (params) => request({
+    url: '/api/jobslink-api/nearby/job/queryJobsByNearby',
+    method: 'get',
+    params
+});
\ No newline at end of file
diff --git a/pages.json b/pages.json
index 11e5f77..95e07f3 100644
--- a/pages.json
+++ b/pages.json
@@ -398,6 +398,15 @@
                 "navigationBarBackgroundColor": "#FFFFFF",
                 "enablePullDownRefresh": false
             }
+        },
+        {
+            "path": "pages/project/map",
+            "style": {
+                "backgroundTextStyle": "dark",
+                "navigationBarTextStyle": "black",
+                "enablePullDownRefresh": true,
+                "navigationStyle": "custom"
+            }
         }
     ],
     "subPackages": [{
diff --git a/pages/project/map.vue b/pages/project/map.vue
new file mode 100644
index 0000000..fdba1ef
--- /dev/null
+++ b/pages/project/map.vue
@@ -0,0 +1,434 @@
+<template>
+    <view class="app_container">
+        <view class="app-top">
+            <view class="top-search">
+                <view class="top-input">
+                    <input class="put" type="text" placeholder-class="put-pla" v-model="searchValue"
+                        placeholder="搜索地点或者附近的任务及岗位">
+                    <button class="input-btn" @tap="search">搜索</button>
+                </view>
+            </view>
+        </view>
+        <view class="view-map">
+            <map style="width: 100%;height: 100%;" scale="16" :latitude="latitude" :longitude="longitude"
+                :markers="covers" @markertap="clickmark" @regionchange="show = false"></map>
+            <view class="position-bottom" v-if="show">
+                <view class="uni-margin-wrap">
+                    <swiper class="swiper" circular :interval="2000" :duration="500">
+                        <swiper-item class="wiperItem">
+                            <view class="swiper-item uni-bg-red">
+                                <view class="item-content">
+                                    <view class="content-title"> {{productInfo.missionTitle}} </view>
+                                    <view class="color_999999 fs_12 mar_top5">
+                                        <uni-icons type="location" color="#999999" size="12"></uni-icons>
+                                        {{ productInfo.cityId }} ｜ {{productInfo.address}} ｜ 距离：{{distance}}
+                                    </view>
+                                    <view class="color_999999 fs_12 mar_top5">
+                                        <uni-icons type="map-pin-ellipse" color="#999999" size="12"></uni-icons>
+                                        招聘时间: {{productInfo.stime}}-{{productInfo.etime}}
+                                    </view>
+                                    <view class="color_999999 fs_12 mar_top5">
+                                        <uni-icons type="map-pin-ellipse" color="#999999" size="12"></uni-icons>
+                                        {{productInfo.experienceDesc}} | {{education[productInfo.education]}}
+                                    </view>
+                                    <button class="btns" hover-class="active" @tap="openMap">
+                                        <image class="btn-img" src="../../static/img/direction2.png" />查看详情
+                                    </button>
+                                </view>
+                            </view>
+                        </swiper-item>
+                    </swiper>
+                </view>
+            </view>
+        </view>
+    </view>
+</template>
+
+<script>
+    import {
+        addZeroPrefix,
+        getDistanceFromLatLonInKm
+    } from '@/untils/tools.js'
+    import testData from '@/common/textdata.js';
+    import {
+        geQueryJobsByNearby
+    } from '@/api/map.js'
+    let taskpoint = require('../../static/img/taskpoint.png');
+    let gwpoint = require('../../static/img/gwpoint.png');
+    let mypoint = require('../../static/img/mypoint.png');
+    export default {
+        data() {
+            return {
+                education: testData.education,
+                show: false,
+                ID: 1,
+                searchValue: '',
+                latitude: 31.133980,
+                longitude: 104.404419,
+                covers: [],
+                rateValue: 2,
+                productInfo: {},
+
+            };
+        },
+        computed: {
+            distance() {
+                const {
+                    lon,
+                    lat
+                } = this.productInfo
+                if (lon) {
+                    const {
+                        m,
+                        km
+                    } = getDistanceFromLatLonInKm(lat, lon, this.latitude, this.longitude)
+                    return m > 1000 ? `${km.toFixed(2)}km` : `${m.toFixed(2)}m`
+                }
+                return '无'
+            }
+        },
+        onShow() {
+            const _this = this
+            // uni.getLocation({
+            //     type: 'gcj02',
+            //     success: function(res) {
+            //         const {
+            //             longitude,
+            //             latitude
+            //         } = res
+            //         _this.$api.msg('成功获得周边信息')
+            //         console.log('成功获得周边信息', res)
+            //         _this.latitude = latitude
+            //         _this.longitude = longitude
+            //         _this.$api.msg('获得周边信息')
+            //         _this.getList(lon, lat).then((covers) => {
+            //             _this.covers = covers
+            //         })
+            //     },
+            //     fail: function(err) {
+            //         _this.$api.msg('无法获得周边信息')
+            //     },
+            //     complete: function(e) {}
+            // })
+            this.mockGetLocation().then((myPoint) => {
+                // this.latitude = myPoint.latitude
+                // this.longitude = myPoint.longitude
+                _this.getList(_this.longitude, _this.latitude).then((covers) => {
+                    _this.$api.msg('成功获得周边信息')
+                    _this.covers = covers
+                })
+            })
+        },
+        methods: {
+            openMap(lon, lat) {
+                //打开地图，并将门店位置传入
+                // type: post 岗位 mission 任务
+                switch (this.productInfo.type) {
+                    case 'post':
+                        const no = encodeURIComponent(1)
+                        uni.navigateTo({
+                            url: `/pages/projectInfo/workInfo?workId=${encodeURIComponent(no)}&isCan=${1}`
+                        })
+                        break
+                    case 'mission':
+                        const no1 = encodeURIComponent(this.productInfo.missionNo)
+                        uni.navigateTo({
+                            url: `/pages/projectInfo/projectInfo?missionNo=${no1}&isCan=${1}`
+                        })
+                        break
+                }
+            },
+            search() {
+                this.getList(this.longitude, this.longitude).then((covers) => {
+                    this.covers = covers
+                })
+            },
+            clickmark(e) {
+                if (e.detail.markerId === 1) return
+                this.show = true;
+                for (var i = 0; i < this.covers.length; i++) {
+                    //遍历集合找出对应的maekerid的数据
+                    if (this.covers[i].id == e.detail.markerId) {
+                        this.productInfo = this.covers[i].info
+                        break;
+                    }
+                }
+            },
+            mockGetLocation() {
+                return new Promise((resolve) => {
+                    resolve({
+                        "longitude": 104.40632,
+                        "latitude": 31.122989,
+                        "altitude": null,
+                        "accuracy": 25.998,
+                        "altitudeAccuracy": null,
+                        "heading": null,
+                        "speed": null,
+                        "errMsg": "getLocation:ok",
+                        "verticalAccuracy": 0,
+                        "horizontalAccuracy": 25.998
+                    })
+                })
+            },
+            async getList(lon, lat) {
+                return new Promise(async (resolve) => {
+                    let params = {
+                        lon,
+                        lat,
+                        distanceRange: 20,
+                        taskTitle: this.searchValue
+                    }
+                    // let json = [{
+                    //     "id": "1783015444661387266",
+                    //     "createUser": "242452735",
+                    //     "createDept": "171612561",
+                    //     "createTime": "2024-04-24 14:09:43",
+                    //     "updateUser": "242452735",
+                    //     "updateTime": "2024-04-24 14:09:43",
+                    //     "status": 1,
+                    //     "isDeleted": 0,
+                    //     "missionTitle": "维修人员",
+                    //     "skillNames": "市场/品牌推广",
+                    //     "companyIndustry": "家政",
+                    //     "tradeId": "1754327500065390599",
+                    //     "tradeNames": "制造业",
+                    //     "wage": "3",
+                    //     "wageUnitCategory": 2,
+                    //     "lat": 31.131007394902717,
+                    //     "lon": 104.40944639490272,
+                    //     "type": "post",
+                    //     "address": "广告法规定发给对方的反感",
+                    //     "cityId": "北京-北京市-东城区 ",
+                    //     "missionDesc": "范德萨发大水发发的发的发的方法是否是对方感受感受地方噶 好好放个假非户籍",
+                    //     "stime": "2024-04-25 00:00:00",
+                    //     "etime": "2024-04-26 00:00:00",
+                    //     "etimePub": "",
+                    //     "education": 7,
+                    //     "experienceDesc": "不限经验",
+                    //     "callName": "叶婷婷",
+                    //     "callTel": "15196372910"
+                    // }]
+                    // const arr = json.map((item) => ({
+                    //     id: item.id,
+                    //     longitude: item.lon,
+                    //     latitude: item.lat,
+                    //     iconPath: item.type === 'post' ? gwpoint : taskpoint,
+                    //     width: 20,
+                    //     height: 20,
+                    //     callout: {
+                    //         content: item.missionTitle,
+                    //         fontSize: 10,
+                    //         borderColor: 'blue',
+                    //     },
+                    //     info: item
+                    // }))
+                    // arr.push({
+                    //     id: 1,
+                    //     latitude: lat,
+                    //     longitude: lon,
+                    //     iconPath: mypoint,
+                    //     width: 20,
+                    //     height: 20
+                    // })
+                    // resolve(arr)
+                    let resData = await geQueryJobsByNearby(params)
+                    if (resData.data.code === 200) {
+                        const arr = resData.data.data.map((item) => ({
+                            id: item.id,
+                            longitude: item.lon,
+                            latitude: item.lat,
+                            iconPath: item.type === 'post' ? gwpoint : taskpoint,
+                            width: 20,
+                            height: 20,
+                            callout: {
+                                content: item.missionTitle,
+                                fontSize: 10,
+                                borderColor: 'blue',
+                            },
+                            info: item
+                        }))
+                        arr.push({
+                            id: 1,
+                            latitude: lat,
+                            longitude: lon,
+                            iconPath: mypoint,
+                            width: 20,
+                            height: 20
+                        })
+                        resolve(arr)
+                    }
+
+                })
+            }
+        }
+    }
+</script>
+
+<style lang="scss" scoped>
+    .color_999999 {
+        color: #999999;
+    }
+
+    .fs_12 {
+        font-size: 24rpx;
+    }
+
+    .mar_top5 {
+        margin-top: 10rpx;
+    }
+
+    .active {
+        background: #EAEAEA !important;
+        color: #AFAFAF;
+    }
+
+    .card_mark {
+        .mark_l {
+            width: 56rpx;
+            height: 28rpx;
+            border-radius: 12rpx 0 12rpx 12rpx;
+            background: linear-gradient(157deg, #A043C1 0%, #4133A2 100%);
+            font-size: 28rpx;
+            font-family: PingFang-SC-Bold, PingFang-SC;
+            font-weight: bold;
+            color: #FFFFFF;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+    }
+
+    .position-bottom {
+        position: absolute;
+        left: 0;
+        right: 0;
+        height: 406rpx;
+        bottom: 50rpx;
+
+        .uni-margin-wrap {
+            height: 406rpx;
+
+            .swiper {
+                height: 406rpx;
+
+                .wiperItem {
+                    padding-left: 50rpx;
+                    height: 406rpx;
+                    width: 660rpx !important;
+
+                    .swiper-item {
+                        width: 660rpx;
+                        height: 406rpx;
+                        background: #FFFFFF;
+                        box-shadow: 0rpx 2rpx 4rpx 0rpx rgba(0, 0, 0, 0.5);
+                        border-radius: 27rpx;
+                        overflow: hidden;
+
+                        .item-top {
+                            display: flex;
+                            align-content: center;
+                            justify-content: space-between;
+
+                            .top-img {
+                                width: 215rpx;
+                                height: 120rpx;
+                            }
+                        }
+
+                        .item-content {
+                            padding: 15rpx 33rpx;
+
+                            .content-title {
+                                font-size: 32rpx;
+                            }
+
+                            .btns {
+                                margin-top: 20rpx;
+                                display: flex;
+                                align-items: center;
+                                justify-content: center;
+                                width: 223rpx;
+                                height: 64rpx;
+                                background: linear-gradient(to right, #A043C1 0%, #4133A2 100%);
+                                border-radius: 15rpx;
+                                color: #FFFFFF;
+                                font-size: 26rpx;
+                                font-weight: 800;
+                                color: #FFFFFF;
+                                line-height: 64rpx;
+
+                                .btn-img {
+                                    width: 32rpx;
+                                    height: 32rpx;
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+
+
+        }
+    }
+
+    .app_container {
+        position: fixed;
+        left: 0;
+        top: 0;
+        right: 0;
+        bottom: 0;
+
+        .app-top {
+            display: flex;
+            background: linear-gradient(to right, #e8e8e8, #e8e8e8);
+            padding-bottom: 16rpx;
+            padding-top: 24rpx;
+
+            .top-search {
+                position: relative;
+                width: 100%;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+
+                .top-input {
+                    width: 710rpx;
+
+                    .put {
+                        padding-left: 30rpx;
+                        height: 72rpx;
+                        background: #FFFFFF;
+                        border-radius: 36rpx;
+                    }
+
+                    /deep/ .put-pla {
+                        height: 33rpx;
+                        font-size: 24rpx;
+                        font-weight: 400;
+                        color: #999999;
+                        line-height: 33rpx;
+                    }
+
+                    .input-btn {
+                        position: absolute;
+                        right: 30rpx;
+                        top: 50%;
+                        transform: translate(0, -50%);
+                        color: #FFFFFF;
+                        width: 120rpx;
+                        height: 56rpx;
+                        line-height: 56rpx;
+                        font-size: 28rpx;
+                        background: linear-gradient(157deg, #A043C1 0%, #4133A2 100%);
+                        border-radius: 29rpx;
+                    }
+                }
+            }
+        }
+
+        .view-map {
+            height: 100%;
+            width: 100%;
+        }
+    }
+</style>
\ No newline at end of file
diff --git a/pages/project/project.vue b/pages/project/project.vue
index e0b0f27..e4466a7 100644
--- a/pages/project/project.vue
+++ b/pages/project/project.vue
@@ -3,9 +3,9 @@
         <view class="titleSearch">
             <view class="searchName">搜 索</view>
 
-            <u-search placeholder="搜零工岗位/搜全职岗位/搜政策" @focus="goSeach" shape="round" :showAction="false"></u-search>
+            <u-search placeholder="搜任务/搜岗位/搜政策" @focus="goSeach" shape="round" :showAction="false"></u-search>
         </view>
-        <view class="navPosition" @click="navTo('/pages/project/projectList')">
+        <view class="navPosition" @click="navTo('/pages/project/map')">
             <u-icon name="map" color="#2979ff" size="16"></u-icon>
             <view class="positionText">四川德阳市</view>
             <u-icon name="arrow-right" color="#666666" size="14"></u-icon>
@@ -174,7 +174,8 @@
                 isSearch: false,
                 searchData: {},
 
-                nonReactiveArray: ["推荐零工岗位", "推荐全职岗位"],
+                // nonReactiveArray: ["推荐任务", "推荐岗位", "个体户招工"],
+                nonReactiveArray: ["推荐零工任务", "推荐岗位"],
             }
         },
         onLoad: function() {
diff --git a/static/img/direction.png b/static/img/direction.png
new file mode 100644
index 0000000..952b10d
Binary files /dev/null and b/static/img/direction.png differ
diff --git a/static/img/direction2.png b/static/img/direction2.png
new file mode 100644
index 0000000..e340e1c
Binary files /dev/null and b/static/img/direction2.png differ
diff --git a/static/img/gwpoint.png b/static/img/gwpoint.png
new file mode 100644
index 0000000..9614f00
Binary files /dev/null and b/static/img/gwpoint.png differ
diff --git a/static/img/mypoint.png b/static/img/mypoint.png
new file mode 100644
index 0000000..825734b
Binary files /dev/null and b/static/img/mypoint.png differ
diff --git a/static/img/taskpoint.png b/static/img/taskpoint.png
new file mode 100644
index 0000000..b4eb315
Binary files /dev/null and b/static/img/taskpoint.png differ
diff --git a/untils/tools.js b/untils/tools.js
index ca303be..0e3e4b9 100644
--- a/untils/tools.js
+++ b/untils/tools.js
@@ -1,4 +1,4 @@
-function onDialingPhoneNumber(phone) {
+export function onDialingPhoneNumber(phone) {
     return new Promise((resolve, reject) => {
         uni.makePhoneCall({
             phoneNumber: phone, // 电话号码
@@ -11,8 +11,39 @@ function onDialingPhoneNumber(phone) {
         });
     })
 }
+/**
+ * 个位数，加0前缀
+ * @param {*} number
+ * @returns
+ */
+export function addZeroPrefix(number) {
+    return number < 10 ? `0${number}` : number
+}
+
+export function getDistanceFromLatLonInKm(lat1, lon1, lat2, lon2) {
+    const R = 6371; // 地球平均半径，单位为公里
+    const dLat = deg2rad(lat2 - lat1);
+    const dLon = deg2rad(lon2 - lon1);
+    const a =
+        Math.sin(dLat / 2) * Math.sin(dLat / 2) +
+        Math.cos(deg2rad(lat1)) * Math.cos(deg2rad(lat2)) *
+        Math.sin(dLon / 2) * Math.sin(dLon / 2);
+    const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
+    const d = R * c;
+    return {
+        km: d,
+        m: d * 1000
+    };
+}
+
+// 将角度转换为弧度
+function deg2rad(deg) {
+    return deg * (Math.PI / 180);
+}
 
 
 export default {
-    onDialingPhoneNumber
+    onDialingPhoneNumber,
+    addZeroPrefix,
+    getDistanceFromLatLonInKm
 }
\ No newline at end of file