flat: 地图对接

components/uMapView/uMapView.vue

@@ -0,0 +1,383 @@
+<template>
+    <view class="app-content">
+        <view id="map" style="width: 100%;height: 100%;"></view>
+    </view>
+</template>
+
+<script>
+    import 'ol/ol.css';
+    import Map from 'ol/Map';
+    import View from 'ol/View';
+    import TileLayer from 'ol/layer/Tile';
+    import SourceVector from 'ol/source/Vector';
+    import LayerVector from 'ol/layer/Vector';
+    import * as control from 'ol/control';
+    import {
+        toLonLat
+    } from 'ol/proj';
+    import Overlay from 'ol/Overlay';
+    import {
+        toStringHDMS
+    } from 'ol/coordinate';
+    import {
+        Select
+    } from 'ol/interaction'
+    import {
+        GeoJSON
+    } from 'ol/format';
+    import {
+        Style,
+        Circle,
+        Fill,
+        Stroke,
+        Icon,
+        Text
+    } from 'ol/style';
+    import Feature from 'ol/Feature';
+    import {
+        Point,
+        Polygon
+    } from 'ol/geom';
+    import {
+        Logo,
+        TileSuperMapRest,
+        FeatureService,
+        GetFeaturesByGeometryParameters
+    } from '@supermap/iclient-ol';
+    let mypoint = require('@/static/img/mypoint.png');
+    export default {
+        name: "uMapView",
+        props: {
+            latitude: {
+                required: true,
+            },
+            longitude: {
+                required: true,
+            },
+            zoom: {
+                type: Number,
+                required: false,
+                default: 10,
+            },
+            maxZoom: {
+                type: Number,
+                required: false,
+                default: 20,
+            },
+            minZoom: {
+                type: Number,
+                required: false,
+                default: 0,
+            },
+            ScaleZoom: {
+                type: Boolean,
+                required: false,
+                default: false,
+            },
+            MapUrl: { // 瓦片地图URL
+                type: String,
+                required: true,
+                default: '',
+            },
+            flagTip: {
+                type: Boolean,
+                required: false,
+                default: false,
+            },
+            open: {
+                type: Boolean,
+                required: false,
+                default: false,
+            }
+        },
+        data() {
+            return {
+                // 实例化对象
+                map: null,
+                addPointsSource: null,
+                vectorSource: null,
+                vectorSourceIcon: null,
+                vectorLayerIcon: null,
+                selectInteraction: null,
+                helpTooltipElement: null,
+                helpTooltip: null,
+                isclearPoint: null,
+                overlay: null,
+                // 控制参数
+                isShowToolTip: false,
+            };
+        },
+        mounted() {
+            this.initMap()
+            if (this.flagTip) {
+                this.createHelpTooltip()
+            }
+        },
+        methods: {
+            initMap() {
+                this.map = new Map({
+                    target: 'map',
+                    controls: control.defaults({
+                        attribution: false,
+                        zoom: this.ScaleZoom,
+                    }),
+                    layers: [
+                        new TileLayer({ // 使用瓦片
+                            source: new TileSuperMapRest({
+                                url: this.MapUrl,
+                                wrapX: true,
+                            }),
+                            projection: 'EPSG:4326',
+                        }),
+                    ],
+                    view: new View({
+                        center: [this.longitude, this.latitude],
+                        maxZoom: this.maxZoom,
+                        minZoom: this.minZoom,
+                        zoom: this.zoom,
+                        projection: 'EPSG:4326',
+                    })
+                });
+                //添加查询结果图层
+                this.vectorSource = new SourceVector({
+                    wrapX: false
+                });
+                const resultLayer = new LayerVector({
+                    source: this.vectorSource,
+                });
+
+                //添加点图层
+                this.addPointsSource = new SourceVector({
+                    wrapX: false
+                });
+                const addPointsLayer = new LayerVector({
+                    source: this.addPointsSource,
+                });
+                this.map.addLayer(addPointsLayer);
+                this.map.addLayer(resultLayer);
+                this.map.on('pointermove', (e) => {
+                    if (this.isShowToolTip) {
+                        this.helpTooltip.setPosition(undefined);
+                        this.helpTooltipElement.classList.add('hidden');
+                    }
+                    this.$emit('regionchange', e.pixel)
+                });
+                this.map.on('singleclick', (e) => {
+                    this.$emit('clickMap', this.coordinate)
+                });
+
+                if (this.open) {
+                    this.addFeature([{
+                        id: 1,
+                        latitude: this.latitude,
+                        longitude: this.longitude,
+                        iconPath: mypoint,
+                        title: '我的位置',
+                        width: 20,
+                        height: 20
+                    }])
+                }
+
+            },
+            addMarker(point) {
+                console.log('point', point)
+                // this.ceateMarker([104.404419, 31.133980])
+            },
+            addFeature(covers) {
+                const features = covers.map((item) => ({
+                    type: 'Feature',
+                    geometry: {
+                        type: 'Point',
+                        coordinates: [item.longitude, item.latitude],
+                    },
+                    properties: {
+                        iconPath: item.iconPath,
+                        text: item.title,
+                        value: JSON.stringify(item),
+                        scale: item.id === 1 ? [0.15, 0.15] : [0.1, 0.1]
+                    }
+                }))
+
+                this.careateFeature(features)
+
+            },
+            ceateMarker(point) {
+                // 创建一个坐标点
+                const pointed = new Point(point); // 这里的[0, 0]应该替换为您的经度和纬度
+
+                // 创建一个特征
+                const pointFeature = new Feature({
+                    geometry: pointed,
+                    name: 'My Point'
+                });
+
+                pointFeature.setStyle(new Style({
+                    image: new Circle({
+                        fill: new Fill({
+                            color: [255, 0, 0, 0.5]
+                        }),
+                        stroke: new Stroke({
+                            color: 'red',
+                            width: 2
+                        }),
+                        radius: 8
+                    })
+                }));
+
+                pointFeature.setProperties({
+                    POP: 1,
+                    CAPITAL: 'test'
+                });
+                // 将特征添加到矢量图层
+                this.addPointsSource.addFeature(pointFeature);
+                // 确保更新地图视图以显示新的标点
+                this.map.getView().fit(this.addPointsSource.getExtent());
+                // // 或者移动视图
+                // _this.map.getView().animate({
+                //     duration: 850,
+                //     zoom: 5,
+                //     center: point,
+                // });
+
+            },
+            careateFeature(result) {
+                if (this.vectorSourceIcon) {
+                    this.vectorSourceIcon.clear()
+                }
+                const geojsonObject = {
+                    type: 'FeatureCollection',
+                    features: result,
+                };
+                // 创建一个图层作为点位
+                this.vectorSourceIcon = new SourceVector({
+                    features: new GeoJSON().readFeatures(geojsonObject)
+                });
+                this.vectorLayerIcon = new LayerVector({
+                    source: this.vectorSourceIcon,
+                    style: feature => {
+                        return new Style({
+                            image: new Icon({
+                                anchor: [0.5, 0.9],
+                                scale: feature.get('scale'),
+                                src: feature.get('iconPath'),
+                            }),
+                            text: new Text({
+                                text: feature.get('text'),
+                                fill: new Fill({
+                                    color: '#000'
+                                }),
+                                stroke: new Stroke({
+                                    color: '#fff',
+                                    width: 3
+                                }),
+                                font: 'normal 12px Calibri, sans-serif',
+                                textAlign: 'center', // 文本对齐
+                                offsetX: 0,
+                                offsetY: 15,
+                                rotation: 0, // 文本旋转
+                            }),
+                        });
+                    }
+                });
+                this.map.addLayer(this.vectorLayerIcon);
+                this.selectInteraction = new Select({
+                    layers: [this.vectorLayerIcon]
+                });
+                this.selectInteraction.on('select', (event) => {
+                    const selectedFeatures = event.selected;
+                    if (selectedFeatures.length) {
+                        const select = selectedFeatures[0].values_
+                        this.$emit('markertap', JSON.parse(select.value))
+                        // tooltip
+                        if (this.flagTip) {
+                            const coordinate = selectedFeatures[0].values_.geometry.flatCoordinates;
+                            this.helpTooltipElement.innerHTML = select.text;
+                            console.log(this.helpTooltip)
+                            this.helpTooltip.setPosition(coordinate);
+                            this.helpTooltipElement.classList.remove('hidden');
+                            this.map.addOverlay(this.helpTooltip);
+                            this.isShowToolTip = true
+                        }
+                    }
+                });
+                this.map.addInteraction(this.selectInteraction);
+            },
+            createHelpTooltip() {
+                this.helpTooltipElement
+                if (this.helpTooltipElement) {
+                    this.helpTooltipElement.parentNode.removeChild(this.helpTooltipElement);
+                }
+                this.helpTooltipElement = document.createElement('div');
+                this.helpTooltipElement.className = 'tooltip hidden';
+                this.helpTooltip = new Overlay({
+                    element: this.helpTooltipElement,
+                    offset: [-30, 20],
+                    positioning: 'center-left'
+                });
+            }
+        }
+    }
+</script>
+
+<style scoped>
+    .app-content {}
+
+    .editPane {
+        position: absolute;
+        right: 65px;
+        top: 8px;
+        text-align: center;
+        background: #FFF;
+        z-index: 1000;
+        border-radius: 4px;
+    }
+
+    .ol-popup {
+        position: absolute;
+        background-color: white;
+        -webkit-filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
+        filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
+        padding: 15px;
+        border-radius: 10px;
+        border: 1px solid #cccccc;
+        bottom: 12px;
+        left: -50px;
+        min-width: 120px;
+        white-space: nowrap;
+    }
+
+    .ol-popup:after,
+    .ol-popup:before {
+        top: 100%;
+        border: solid transparent;
+        content: " ";
+        height: 0;
+        width: 0;
+        position: absolute;
+        pointer-events: none;
+    }
+
+    .ol-popup:after {
+        border-top-color: white;
+        border-width: 10px;
+        left: 48px;
+        margin-left: -10px;
+    }
+
+    .ol-popup:before {
+        border-top-color: #cccccc;
+        border-width: 11px;
+        left: 48px;
+        margin-left: -11px;
+    }
+
+    .tooltip {
+        position: relative;
+        background: rgba(0, 0, 0, 0.5);
+        border-radius: 4px;
+        color: white;
+        padding: 4px 8px;
+        opacity: 0.7;
+        white-space: nowrap;
+    }
+</style>

config.js

@@ -4,6 +4,9 @@ module.exports = {
     imageUrl: '',
     // 显示标题
     showTitle: false,
+    // map 1、黑色模块 2、白色模块
+    // supperMap: 'http://10.165.0.44:1205/proxy/rest/maps/f346b6c59dc64d5793713cf384fab78d/33cbaa14370449a08588f1074ecfec67',
+    supperMap: 'http://10.165.0.44:1205/proxy/rest/maps/c02c6f51f3ab4190bffd5e3e54cf5ac4/111013e9067749488d44841208771768',
     // 应用信息
     appInfo: {
         // 应用名称

main.js

@@ -41,10 +41,12 @@ import JlButton from "@/components/jl-button/main.vue"
 import JlForm from "@/components/jl-form/main.vue"
 import JlFormItem from "@/components/jl-form/item.vue"
 import CSButton from "@/components/cs-button/main.vue"
+import superMapView from '@/components/uMapView/uMapView.vue';
 Vue.component('jl-button', JlButton)
 Vue.component('jl-form', JlForm)
 Vue.component('jl-form-item', JlFormItem)
 Vue.component('cs-button', CSButton)
+Vue.component('super-map', superMapView)
 Vue.component('empty', empty)
 Vue.prototype.$api = {
     msg,

package.json

@@ -17,9 +17,13 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
+    "@supermap/iclient-ol": "^11.1.1",
     "decimal.js": "^10.2.0",
     "js-base64": "^2.4.9",
     "js-md5": "^0.7.3",
     "vue-jsonp": "^2.0.0"
+  },
+  "devDependencies": {
+    "@supermap/babel-plugin-import": "0.0.1"
   }
 }

pages.json

@@ -418,7 +418,7 @@
             "style": {
                 "backgroundTextStyle": "dark",
                 "navigationBarTextStyle": "black",
-                "enablePullDownRefresh": true,
+                "enablePullDownRefresh": false,
                 "navigationStyle": "custom"
             }
         },

pages/project/map.vue

@@ -10,8 +10,12 @@
             </view>
         </view>
         <view class="view-map">
-            <map style="width: 100%;height: 100%;" scale="16" :latitude="latitude" :longitude="longitude"
+            <super-map ref="uMap" style="width: 100%;height: 100%;" :latitude="latitude" :longitude="longitude"
-                :markers="covers" @markertap="clickmark" @regionchange="show = false"></map>
+                :zoom="14" :min-zoom="10" :max-zoom="20" @markertap="clickmark" @regionchange="show = false"
+                :MapUrl="$config.supperMap" :flag-tip="false"></super-map>
+            <!-- <view id="map" ></view> -->
+            <!-- <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">
@@ -68,7 +72,6 @@
                 covers: [],
                 rateValue: 2,
                 productInfo: {},
-
             };
         },
         computed: {
@@ -87,7 +90,7 @@
                 return '无'
             }
         },
-        onShow() {
+        mounted() {
             const _this = this
             uni.getLocation({
                 type: 'gcj02',
@@ -96,13 +99,10 @@
                         longitude,
                         latitude
                     } = res
-                    // _this.$api.msg('成功获得周边信息')
-                    // console.log('成功获得周边信息', res)
                     _this.latitude = latitude
                     _this.longitude = longitude
-                    // _this.$api.msg('获得周边信息')
                     _this.getList(longitude, latitude).then((covers) => {
-                        _this.covers = covers
+                        _this.$refs.uMap.addFeature(covers)
                     })
                 },
                 fail: function(err) {
@@ -110,12 +110,15 @@
                 },
                 complete: function(e) {}
             })
+        },
+        onShow() {
+            // const _this = this
             // this.mockGetLocation().then((myPoint) => {
-            //     // this.latitude = myPoint.latitude
+            //     this.latitude = myPoint.latitude
-            //     // this.longitude = myPoint.longitude
+            //     this.longitude = myPoint.longitude
             //     _this.getList(_this.longitude, _this.latitude).then((covers) => {
             //         _this.$api.msg('成功获得周边信息')
-            //         _this.covers = covers
+            //         _this.$refs.uMap.addFeature(covers)
             //     })
             // })
         },
@@ -139,20 +142,32 @@
                 }
             },
             search() {
-                this.getList(this.longitude, this.longitude).then((covers) => {
+                uni.getLocation({
-                    this.covers = covers
+                    type: 'gcj02',
+                    success: function(res) {
+                        const {
+                            longitude,
+                            latitude
+                        } = res
+                        _this.latitude = latitude
+                        _this.longitude = longitude
+                        _this.getList(longitude, latitude).then((covers) => {
+                            _this.$refs.uMap.addFeature(covers)
                         })
                     },
-            clickmark(e) {
+                    fail: function(err) {
-                if (e.detail.markerId === 1) return
+                        _this.$api.msg('无法获得周边信息')
+                    },
+                    complete: function(e) {}
+                })
+                // this.getList(this.longitude, this.longitude).then((covers) => {
+                //     this.covers = covers
+                // })
+            },
+            clickmark(cover) {
+                if (cover.markerId === 1) return
                 this.show = true;
-                for (var i = 0; i < this.covers.length; i++) {
+                this.productInfo = cover.info
-                    //遍历集合找出对应的maekerid的数据
-                    if (this.covers[i].id == e.detail.markerId) {
-                        this.productInfo = this.covers[i].info
-                        break;
-                    }
-                }
             },
             mockGetLocation() {
                 return new Promise((resolve) => {
@@ -178,59 +193,6 @@
                         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) => ({
@@ -240,6 +202,7 @@
                             iconPath: item.type === 'post' ? gwpoint : taskpoint,
                             width: 20,
                             height: 20,
+                            title: item.missionTitle,
                             callout: {
                                 content: item.missionTitle,
                                 fontSize: 10,
@@ -252,6 +215,7 @@
                             latitude: lat,
                             longitude: lon,
                             iconPath: mypoint,
+                            title: '我的位置',
                             width: 20,
                             height: 20
                         })
@@ -377,6 +341,8 @@
         top: 0;
         right: 0;
         bottom: 0;
+        display: flex;
+        flex-direction: column;
 
         .app-top {
             display: flex;
@@ -427,8 +393,7 @@
         }
 
         .view-map {
-            height: 100%;
+            flex: 1;
-            width: 100%;
         }
     }
 </style>

pages/projectInfo/projectInfo.vue

@@ -100,7 +100,12 @@
             <view class="prolist">
                 详细地址：{{info.address || '暂无'}}
             </view>
-            <map class="map" :latitude="latitude" :longitude="longitude" :markers="covers"></map>
+            <view class="map">
+                <super-map ref="uMap" style="width: 100%;height: 100%;" :latitude="latitude" :longitude="longitude"
+                    :open="true" :zoom="14" :min-zoom="10" :max-zoom="20" @regionchange="show = false"
+                    :MapUrl="$config.supperMap" :flag-tip="false"></super-map>
+            </view>
+            <!-- <map class="map" :latitude="latitude" :longitude="longitude" :markers="covers"></map> -->
         </view>
         <view class="" style="height:200rpx;background-color: #f6f6f6;" v-if="isShow!=='0'"></view>
         <view class="btn" v-if="isShow!=='0'&&status===0">

pages/projectInfo/userrecruitInfo.vue

@@ -103,7 +103,12 @@
             <view class="prolist">
                 详细地址：{{info.address || '暂无'}}
             </view>
-            <map class="map" :latitude="latitude" :longitude="longitude" :markers="covers"></map>
+            <view class="map">
+                <super-map ref="uMap" style="width: 100%;height: 100%;" :latitude="latitude" :longitude="longitude"
+                    :open="true" :zoom="14" :min-zoom="10" :max-zoom="20" @regionchange="show = false"
+                    :MapUrl="$config.supperMap" :flag-tip="false"></super-map>
+            </view>
+            <!-- <map class="map" :latitude="latitude" :longitude="longitude" :markers="covers"></map> -->
         </view>
         <view class="" style="height:200rpx;background-color: #f6f6f6;" v-if="isShow!=='0'"></view>
         <view class="btn" v-if="isShow!=='0'&&status===0">

pages/projectInfo/userrecruitWorkInfo.vue

@@ -108,7 +108,12 @@
             <view class="prolist">
                 详细地址：{{info.address || '暂无'}}
             </view>
-            <map class="map" :latitude="latitude" :longitude="longitude" :markers="covers"></map>
+            <view class="map">
+                <super-map ref="uMap" style="width: 100%;height: 100%;" :latitude="latitude" :longitude="longitude"
+                    :open="true" :zoom="14" :min-zoom="10" :max-zoom="20" @regionchange="show = false"
+                    :MapUrl="$config.supperMap" :flag-tip="false"></super-map>
+            </view>
+            <!-- <map class="map" :latitude="latitude" :longitude="longitude" :markers="covers"></map> -->
         </view>
         <view class="" style="height:200rpx;background-color: #f6f6f6;" v-if="isShow!=='0'"></view>
         <view class="btn" v-if="isShow!=='0'&&status===0">

pages/projectInfo/workInfo.vue

@@ -105,7 +105,11 @@
             <view class="prolist">
                 详细地址：{{info.address || '暂无'}}
             </view>
-            <map class="map" :latitude="latitude" :longitude="longitude" :markers="covers"></map>
+            <view class="map">
+                <super-map ref="uMap" style="width: 100%;height: 100%;" :latitude="latitude" :longitude="longitude"
+                    :open="true" :zoom="14" :min-zoom="10" :max-zoom="20" @regionchange="show = false"
+                    :MapUrl="$config.supperMap" :flag-tip="false"></super-map>
+            </view>
         </view>
         <view class="" style="height:200rpx;background-color: #f6f6f6;" v-if="isShow!=='0'"></view>
         <view class="btn" v-if="isShow!=='0'&&status===0">

pages/recruit/subPage/newsDetail/projectInfo.vue

@@ -86,7 +86,12 @@
             <view class="prolist">
                 任务地址：{{ info.address }}
             </view>
-            <map class="map" :latitude="latitude" :longitude="longitude" :markers="covers"></map>
+            <view class="map">
+                <super-map ref="uMap" style="width: 100%;height: 100%;" :latitude="latitude" :longitude="longitude"
+                    :open="true" :zoom="14" :min-zoom="10" :max-zoom="20" @regionchange="show = false"
+                    :MapUrl="$config.supperMap" :flag-tip="false"></super-map>
+            </view>
+            <!-- <map class="map" :latitude="latitude" :longitude="longitude" :markers="covers"></map> -->
         </view>
         <view class="" style="height:200rpx;background-color: #f6f6f6;" v-if="isShow !== '0'"></view>
         <view class="btn">

pages/recruit/subPage/newsDetail/userrecruitInfo.vue

@@ -94,7 +94,12 @@
             <view class="prolist">
                 岗位地址：{{ info.address }}
             </view>
-			<map class="map" :latitude="latitude" :longitude="longitude" :markers="covers"></map>
+            <view class="map">
+                <super-map ref="uMap" style="width: 100%;height: 100%;" :latitude="latitude" :longitude="longitude"
+                    :open="true" :zoom="14" :min-zoom="10" :max-zoom="20" @regionchange="show = false"
+                    :MapUrl="$config.supperMap" :flag-tip="false"></super-map>
+            </view>
+            <!-- <map class="map" :latitude="latitude" :longitude="longitude" :markers="covers"></map> -->
         </view>
         <view class="" style="height:200rpx;background-color: #f6f6f6;" v-if="isShow !== '0'"></view>
         <view class="btn">
@@ -146,16 +151,30 @@
 </template>
 
 <script>
-import { mapGetters } from 'vuex'
+    import {
-import { recruit_missionDetail, } from '@/api/mission.js';
+        mapGetters
-import { GoLogin } from '@/untils/AxiosUtils.js';
+    } from 'vuex'
-import { setRead } from '@/api/news.js';
+    import {
-import { checkPass } from '@/api/auth.js';
+        recruit_missionDetail,
+    } from '@/api/mission.js';
+    import {
+        GoLogin
+    } from '@/untils/AxiosUtils.js';
+    import {
+        setRead
+    } from '@/api/news.js';
+    import {
+        checkPass
+    } from '@/api/auth.js';
     import dictionary from '@/common/textdata.js';
-import { dateFormat } from "../../../../untils/format.js";
+    import {
+        dateFormat
+    } from "../../../../untils/format.js";
     import uniMask from '@/components/uni-mask/mask.vue'
     import validCode from '@/components/p-valid-code/p-valid-code.vue'
-import { getuserrecruitDetailApp } from '@/api/userrecruit.js'
+    import {
+        getuserrecruitDetailApp
+    } from '@/api/userrecruit.js'
     export default {
         data() {
             return {
@@ -188,7 +207,10 @@ export default {
                 jobType: null
             }
         },
-	components: { uniMask, validCode },
+        components: {
+            uniMask,
+            validCode
+        },
         onLoad: function(option) { //option为object类型，会序列化上个页面传递的参数
             // this.$store.dispatch('setAutograph')
             if (option.workId) {
@@ -230,7 +252,10 @@ export default {
                 const self = this;
                 let resData = null
                 if (this.jobType) {
-				resData = await getuserrecruitDetailApp({ id: this.id, jobType: this.jobType })
+                    resData = await getuserrecruitDetailApp({
+                        id: this.id,
+                        jobType: this.jobType
+                    })
                 } else {
                     resData = await recruit_missionDetail(self.workId, self.type)
                 }

pages/recruit/subPage/newsDetail/workInfo.vue

@@ -94,7 +94,12 @@
             <view class="prolist">
                 岗位地址：{{ info.address }}
             </view>
-			<map class="map" :latitude="latitude" :longitude="longitude" :markers="covers"></map>
+            <view class="map">
+                <super-map ref="uMap" style="width: 100%;height: 100%;" :latitude="latitude" :longitude="longitude"
+                    :open="true" :zoom="14" :min-zoom="10" :max-zoom="20" @regionchange="show = false"
+                    :MapUrl="$config.supperMap" :flag-tip="false"></super-map>
+            </view>
+            <!-- <map class="map" :latitude="latitude" :longitude="longitude" :markers="covers"></map> -->
         </view>
         <view class="" style="height:200rpx;background-color: #f6f6f6;" v-if="isShow !== '0'"></view>
         <view class="btn">
@@ -146,14 +151,28 @@
 </template>
 
 <script>
-import { mapGetters } from 'vuex'
+    import {
-import { recruit_missionDetail } from '@/api/mission.js';
+        mapGetters
-import { GoLogin } from '@/untils/AxiosUtils.js';
+    } from 'vuex'
-import { setRead } from '@/api/news.js';
+    import {
-import { checkPass } from '@/api/auth.js';
+        recruit_missionDetail
+    } from '@/api/mission.js';
+    import {
+        GoLogin
+    } from '@/untils/AxiosUtils.js';
+    import {
+        setRead
+    } from '@/api/news.js';
+    import {
+        checkPass
+    } from '@/api/auth.js';
     import dictionary from '@/common/textdata.js';
-import { dateFormat } from "../../../../untils/format.js";
+    import {
-import { userrecruitDetail } from '@/api/userrecruit.js'
+        dateFormat
+    } from "../../../../untils/format.js";
+    import {
+        userrecruitDetail
+    } from '@/api/userrecruit.js'
     import uniMask from '@/components/uni-mask/mask.vue'
     import validCode from '@/components/p-valid-code/p-valid-code.vue'
     export default {
@@ -187,7 +206,10 @@ export default {
                 showPopUp: false,
             }
         },
-	components: { uniMask, validCode },
+        components: {
+            uniMask,
+            validCode
+        },
         onLoad: function(option) { //option为object类型，会序列化上个页面传递的参数
             // this.$store.dispatch('setAutograph')
             if (option.workId) {

pages/recruit/subPage/task.vue

@@ -132,8 +132,12 @@
                         :loading="loading" loading-text="数据加载中" placeholder="请输入详细地址" @input="selectInput"
                         v-model="info.address" @confirm="selectConfirm" /> -->
                 </u-form-item>
-
+                <view class="map">
-                <map class="map" :latitude="latitude" :longitude="longitude" :markers="covers"></map>
+                    <super-map ref="uMap" style="width: 100%;height: 100%;" :latitude="latitude" :longitude="longitude"
+                        :open="true" :zoom="14" :min-zoom="10" :max-zoom="20" @regionchange="show = false"
+                        :MapUrl="$config.supperMap" :flag-tip="false"></super-map>
+                </view>
+                <!-- <map class="map" :latitude="latitude" :longitude="longitude" :markers="covers"></map> -->
             </u--form>
             <u-button type="primary" text="提交" customStyle="margin-top: 50px" @click="submit"></u-button>
             <u-button type="error" text="重置" customStyle="margin-top: 10px" @click="reset"></u-button>

pages/recruit/subPage/work.vue

@@ -133,7 +133,12 @@
                 <u-form-item label="详细地址" prop="address" borderBottom labelWidth="80" ref="item1">
                     <u--input v-model="info.address" border="none" placeholder="请输入详细地址"></u--input>
                 </u-form-item>
-                <map class="map" :latitude="latitude" :longitude="longitude" :markers="covers"></map>
+                <view class="map">
+                    <super-map ref="uMap" style="width: 100%;height: 100%;" :latitude="latitude" :longitude="longitude"
+                        :open="true" :zoom="14" :min-zoom="10" :max-zoom="20" @regionchange="show = false"
+                        :MapUrl="$config.supperMap" :flag-tip="false"></super-map>
+                </view>
+                <!-- <map class="map" :latitude="latitude" :longitude="longitude" :markers="covers"></map> -->
             </u--form>
             <u-button type="primary" text="提交" customStyle="margin-top: 50px" @click="submit"></u-button>
             <u-button type="error" text="重置" customStyle="margin-top: 10px" @click="reset"></u-button>

vue.config.js

@@ -3,7 +3,7 @@ module.exports = {
         port: 1887,
         proxy: {
             '/api': {
-                target: 'http://10.165.0.77:8000',
+                target: 'http://10.165.0.173:8000',
                 ws: true,
                 pathRewrite: {
                     '^/api': '/'