Merge branch 'xiao' of https://x--mo.com:9003/gter.net/HKRentingMiniprogram

app.json

@@ -23,8 +23,8 @@
         "pages/circularize/circularize",
         "pages/askHousing/askHousing",
         "pages/transfer/transfer",
-        "pages/findingMap/findingMap"
-
+        "pages/findingMap/findingMap",
+        "pages/placeMap/index"
     ],
 
     "subpackages": [{

pages/placeMap/index.js

@@ -0,0 +1,634 @@
+// pages/Map/Map.js
+let app = getApp()
+var miucms = require('../../utils/miucms.js');
+Page({
+    data: {
+        headerObj: {
+            person: "个人",
+            intermediary: "中介",
+            apartment: "公寓",
+        },
+        headerObjTab: "person",
+        windowHeight: 0, //屏幕高度
+        mapEnableScroll: true, //设置地图是否拖动
+        tabValue: "area", // area  school
+        longitude: 113.36110, //默认定位经度
+        latitude: 23.12463, //默认定位纬度
+        coordinateObj: {}, //储存经纬度
+        mapScale: 11, //地图大小
+        showPlace: false, //显示地方详情
+        //公寓地区id
+        areaMarkerIds: [],
+        //公寓地区内容
+        areaMarkerIdsObj: {},
+        //公寓数据
+        areaMarkerList: [],
+        customCalloutMarkerIds: [1, 20], //按学校数据
+        customCalloutMarkerIdsObj: {
+            1: {
+                title: "香港中文大学",
+                num: 1
+            },
+            20: {
+                title: "香港中文",
+                num: 18
+            }
+        },
+        //按学校数据
+        markersList: [{
+                id: 20,
+                iconPath: "/img/lucency.png",
+                latitude: 23.12463,
+                longitude: 113.36110,
+                width: 0,
+                height: 0,
+                customCallout: {
+                    anchorY: 0,
+                    anchorX: 0,
+                    display: 'ALWAYS',
+                },
+            },
+            {
+                id: 1,
+                latitude: 23.12893,
+                longitude: 113.30290,
+                iconPath: "/img/lucency.png",
+                width: "0rpx",
+                height: "0rpx",
+                customCallout: {
+                    anchorY: 0,
+                    anchorX: 0,
+                    display: 'ALWAYS',
+                },
+            },
+        ],
+        //地区房价数据
+        priceList: [],
+        //地区房价ID
+        priceIdList: [15, 16, 17, 18],
+        //地区房价
+        placePriceList: {
+            15: {
+                title: "HK$ 6900"
+            },
+            16: {
+                title: "HK$ 7500"
+            },
+            17: {
+                title: "HK$ 8500"
+            },
+            18: {
+                title: "HK$ 9500"
+            },
+        },
+        //用户所选地区
+        selectPlace: {},
+        //用户所选地区价格
+        selectPlacePrice: {},
+        //地区房源详情
+        placeInfoList: [],
+        //地区弹窗
+        placePopBox: false,
+        //公寓弹窗
+        apartmentPopBox: false,
+        //用户所选公寓
+        apartmentObj: {},
+        apartmentListId: '', //公寓列表id
+        allPlaceListBoxWidth: 0, //当前页面地区房源宽度
+        scrollTopNum: 0, //记录滚动条
+        personListId: '', //个人地区房价id
+        selectGroupIndex: null,
+        cloneInfo: '', //复制字段
+        pages: 1, //页数
+        count: 0, //品牌数量
+        types: { //筛选组件-出租
+            data: null,
+            value: ''
+        },
+        money: { //金额
+            rent_min: 0,
+            rent_max: ''
+        },
+        moreCondition: { //更多
+            show: false,
+            data: {
+                gender: "0",
+                leaseterm: "0",
+                publish: "twomonth",
+            }
+        },
+        brands: { //品牌
+            list: [],
+            value: '',
+            obj: {}
+        },
+        roomlistings: { //楼型
+            list: [],
+            value: '',
+            obj: {}
+        },
+        roomtype: { //房型
+            list: [],
+            value: '',
+            obj: {}
+        },
+    },
+    touchStart() {
+
+
+    },
+    touchEnd(e) {
+        // console.log(e)
+
+    },
+
+    get_config() {
+        var that = this;
+        if (app.globalData.config && app.globalData.config.lists) {
+            this.setData({
+                screen_data: app.globalData.screen_data,
+            })
+        } else {
+            setTimeout(function () {
+                that.get_config()
+            }, 10)
+        }
+    },
+    // 切换学校/区域
+    switchTab(e) {
+        this.setData({
+            tabValue: e.currentTarget.dataset.type
+        })
+    },
+    showPlacePopBox() {
+        this.setData({
+            placePopBox: !this.data.placePopBox
+        })
+    },
+    //查看详情
+    publicJumps(e) {
+        let uniqid = e.currentTarget.dataset.uniqid
+        let url = e.currentTarget.dataset.url
+        if (url) {
+            wx.navigateTo({
+                url,
+            })
+        } else {
+            wx.navigateTo({
+                url: `/pages/irentDetail/irentDetail?uniqid=${uniqid}`,
+            })
+        }
+    },
+    //监听滚动条
+    scrollChange() {
+        this._observer = wx.createIntersectionObserver(this, {
+            thresholds: [1, 1],
+            observeAll: true
+        })
+        this._observer
+            .relativeTo('#apartmentView')
+            .observe('.pos-id', (res) => {
+                let num = res.intersectionRatio == 1 && res.intersectionRatio % 1 == 0 ? res.dataset.num : null
+                if (!num && num != 0) return
+                if (this.data.apartmentObj.id === this.data.areaMarkerList[num].id) return
+                this.setNowMarker(num)
+            })
+    },
+    // scrollChange(e) {
+    //     let top = Math.floor(e.detail.scrollLeft * 100) / 100
+    //     let scrollNum = top / this.data.allPlaceListBoxWidth
+    //     if (e.detail.scrollLeft > this.data.scrollTopNum) { //左右滑动判断
+    //         if (scrollNum % 1 > 0.95 || scrollNum % 1 === 0) {
+    //             this.setNowMarker(scrollNum.toFixed(0))
+    //         }
+    //     } else {
+    //         if (scrollNum % 1 <= 0.01 || scrollNum % 1 === 0) {
+    //             this.setNowMarker(scrollNum.toFixed(0))
+    //         }
+    //     }
+    //     this.setData({
+    //         scrollTopNum: e.detail.scrollLeft
+    //     })
+    // },
+    //设置当前房间列表id
+    setNowMarker(num) {
+        if (this.data.headerObjTab === 'person') {
+            this.setData({
+                selectPlacePrice: this.data.priceList[num],
+                longitude: this.data.priceList[num].longitude,
+                latitude: this.data.priceList[num].latitude,
+            })
+        } else if (this.data.headerObjTab === 'apartment') {
+            // console.log(this.data.areaMarkerIdsObj[this.data.areaMarkerList[num].id])
+            let obj=this.data.areaMarkerIdsObj[this.data.areaMarkerList[num].id]
+            obj.association.map(res=>{
+                this.data.areaMarkerIdsObj[res].coordinateDisplay=false
+            })
+            this.data.areaMarkerIdsObj[this.data.areaMarkerList[num].id].coordinateDisplay=true
+            this.setData({
+                areaMarkerIdsObj:this.data.areaMarkerIdsObj,
+                apartmentObj: this.data.areaMarkerList[num],
+                longitude: this.data.areaMarkerList[num].longitude,
+                latitude: this.data.areaMarkerList[num].latitude,
+            })
+        }
+    },
+    //聚合点
+    getMapContxt() {
+        this.mapCtx.initMarkerCluster({
+            enableDefaultStyle: false,
+            zoomOnClick: true,
+            gridSize: 60,
+            complete(res) {
+                console.log('initMarkerCluster', res)
+            }
+        })
+        // enableDefaultStyle 为 true 时不会触发改事件
+        this.mapCtx.on('markerClusterCreate', res => {
+            console.log('clusterCreate', res)
+            // const clusters = res.clusters
+            // const markers = clusters.map(cluster => {
+            //   const {
+            //     center,
+            //     clusterId,
+            //     markerIds
+            //   } = cluster
+            //   return  {
+            //     ...center,
+            //     width: 0,
+            //     height: 0,
+            //     clusterId, // 必须
+            //     label: {
+            //       content: markerIds.length + '',
+            //       fontSize: 20,
+            //       width: 60,
+            //       height: 60,
+            //       bgColor: '#00ff00',
+            //       borderRadius: 30,
+            //       textAlign: 'center',
+            //       anchorX: 0,
+            //       anchorY: -30,
+            //     }
+            //   }
+            // })
+            // this.mapCtx.addMarkers({
+            //   markers,
+            //   clear: false,
+            //   complete(res) {
+            //     console.log('clusterCreate addMarkers', res)
+            //   }
+            // })
+        })
+    },
+    callouttap(e) {
+        let id = e.detail.markerId;
+        let object = null;
+        if (this.data.headerObjTab === 'apartment') {
+            this.data.areaMarkerList.find((obj) => {
+                if (obj.id === id) object = obj
+            })
+            this.setData({
+                apartmentListId: 'Marker' + object.id,
+                apartmentObj: object,
+            })
+        } else if (this.data.showPlace && this.data.headerObjTab === 'person') {
+            this.data.priceList.find((obj) => {
+                if (obj.id === id) object = obj
+            })
+            this.setData({
+                selectPlacePrice: object,
+                personListId: 'Marker' + object.id
+            })
+        } else if (this.data.headerObjTab === 'person') {
+            this.data.markersList.find((obj) => {
+                if (obj.id === id) object = obj
+            })
+            this.setData({
+                selectPlace: object,
+                selectPlacePrice: this.data.selectPlacePrice.id ? this.data.selectPlacePrice : this.data.priceList[0],
+                coordinateObj: {
+                    latitude: this.data.latitude,
+                    longitude: this.data.longitude
+                },
+                showPlace: true,
+                latitude: object.latitude,
+                longitude: object.longitude
+            })
+            this.setData({
+                mapScale: 20,
+            })
+            //获取房价元素宽度
+            this.getPlaceWidth()
+        }
+        // console.log(this.data)
+    },
+    cloneBtn() {
+        wx.setClipboardData({
+            data: this.data.cloneInfo.wechat,
+            success(res) {
+                wx.getClipboardData({
+                    success(res) {
+                        console.log(res.data) // data
+                    }
+                })
+            }
+        })
+    },
+    //筛选选中标签
+    submitOperations(e) {
+        let {
+            type
+        } = e.detail
+        if (type == "rent") this.submitMoney(e)
+        if (type == "types") this.submittype(e)
+        if (type == "moreCondition") this.myEventSelectSubmit(e)
+        if (type == 'brand') this.submitBrands(e)
+        if (type == 'house') this.submitRoomtype(e)
+        if (type == 'floor') this.submitRoomlistings(e)
+    },
+    //清空选项标签
+    clearSubmitOption() {
+        this.setData({
+            pages: 1
+        })
+        if (this.data.headerObjTab === 'apartment') { //公寓页面
+            this.getApartmentList()
+        } else {
+
+        }
+    },
+    // 选择房型
+    submitRoomtype(e) {
+        this.data.roomtype.value = e.detail.value || e.currentTarget.dataset.value;
+        this.setData({
+            roomtype: this.data.roomtype
+        })
+        this.clearSubmitOption()
+    },
+    // 选择楼型
+    submitRoomlistings(e) {
+        this.data.roomlistings.value = e.detail.value || e.currentTarget.dataset.value
+        this.setData({
+            roomlistings: this.data.roomlistings
+        })
+        this.clearSubmitOption()
+    },
+    // 选择品牌
+    submitBrands(e) {
+        this.data.brands.value = e.detail.value || e.currentTarget.dataset.value;
+        this.setData({
+            brands: this.data.brands
+        })
+        this.clearSubmitOption()
+    },
+    // 提交出租方式
+    submittype(e) {
+        this.data.types.value = e.detail.types || e.detail.data;
+        this.setData({
+            types: this.data.types,
+            selectGroupIndex: null
+        })
+        this.clearSubmitOption()
+    },
+    // 租金条件筛选提交
+    submitMoney(e) {
+        this.data.money = Object.assign({}, e.detail);
+        this.setData({
+            selectGroupIndex: null,
+            money: this.data.money
+        })
+        this.clearSubmitOption()
+    },
+    // 提交更多
+    myEventSelectSubmit(e) {
+        this.setData({
+            moreCondition: {
+                show: false,
+                data: e.detail
+            },
+            selectGroupIndex: null
+        })
+        this.clearSubmitOption()
+    },
+    //获取宽度
+    getPlaceWidth() {
+        let query = wx.createSelectorQuery();
+        let that = this
+        let type = '.pos-id'
+        query.select(type).boundingClientRect(function (res) {
+            if (!res) return
+            that.setData({
+                allPlaceListBoxWidth: res.width
+            })
+        }).exec()
+        // console.log(123,this.data.allPlaceListBoxWidth)
+    },
+    //数组查重
+    checkCoordinate(areaMarkerIdsObj,list){
+        // console.log(areaMarkerIdsObj,list)
+        let obj={}
+        //去重 整合相同坐标的id
+        list.map((res,index)=>{
+            if(obj[res.coordinate]){
+                obj[res.coordinate].push(res.id)
+                areaMarkerIdsObj[index+1].coordinateDisplay=false
+                areaMarkerIdsObj[index+1].association=obj[res.coordinate]
+            }else{
+                obj[res.coordinate]=[]
+                obj[res.coordinate].push(res.id)
+            }
+        })
+        //去掉自身id
+        for(let data in obj){
+            if(obj[data].length>1){
+                obj[data].map(res=>{
+                    let dataArr=JSON.parse(JSON.stringify(obj[data]))
+                    dataArr.splice(dataArr.indexOf(res),1) 
+                    areaMarkerIdsObj[res].association=dataArr
+                })
+            }
+        }
+        return areaMarkerIdsObj
+        // console.log(obj)
+    },
+    //获取房源筛选
+    getSelectList() {
+        miucms.request(`${app.globalData.baseURL}/tenement/v2/api/map/region`).then(res => {
+            if (res.code === 200) {
+                let data = res.data
+                //获取品牌
+                data.brand.forEach(item => {
+                    item.value = item.id;
+                    this.data.brands.obj[item.id] = item.name;
+                })
+                this.data.brands.list = [{
+                    value: '',
+                    name: '全部品牌'
+                }, ...data.brand];
+                //获取房型
+                data.roomtype.forEach(item => {
+                    item.value = item.id;
+                    this.data.roomtype.obj[item.id] = item.name;
+                })
+                this.data.roomtype.list = [{
+                    value: '',
+                    name: '全部房型'
+                }, ...data.roomtype];
+                //获取楼型
+                data.roomlistings.forEach(item => {
+                    item.value = item.id;
+                    this.data.roomlistings.obj[item.id] = item.name;
+                })
+                this.data.roomlistings.list = [{
+                    value: '',
+                    name: '全部楼型'
+                }, ...data.roomlistings];
+
+                this.setData({
+                    types: {
+                        data: data.type
+                    },
+                    brands: this.data.brands,
+                    roomtype: this.data.roomtype,
+                    roomlistings: this.data.roomlistings
+                })
+            }
+        })
+    },
+    setValue(e) {
+        let {
+            key,
+            value
+        } = e.currentTarget.dataset
+        if (value === 'apartment') {
+            this.getApartmentList()
+            // if (this.setData.apartmentObj) {
+            //     this.setData({
+
+            //     })
+            // }
+        }
+        this.setData({
+            [key]: value,
+            mapScale: 20
+        })
+        this.getPlaceWidth()
+    },
+    //地图视野变化
+    mapViewChange(type, causedBy) {
+        if (type.type === 'end' && type.causedBy === "drag") {
+            console.log(type.detail.centerLocation, type)
+        }
+    },
+    //返回选择学校/区域页面
+    backPerson() {
+        this.setData({
+            latitude: this.data.coordinateObj.latitude,
+            longitude: this.data.coordinateObj.longitude,
+            showPlace: false,
+            mapScale: 11,
+        })
+    },
+    //个人/中介房源列表
+    getHouseList() {
+        let data = {}
+        miucms.request(`${app.globalData.baseURL}/tenement/v2/api/lists`).then(res => {
+            console.log(res)
+        })
+    },
+    //获取公寓数据
+    getApartmentList() {
+        let data = {
+            page: this.data.pages, //当前页数
+            companyid: this.data.brands.value, //品牌
+            roomtype: this.data.roomtype.value, //房型
+            roomlistings: this.data.roomlistings.value,
+            rent_min: this.data.money.rent_min,
+            rent_max: this.data.money.rent_max,
+            limit: 100
+        }
+        miucms.request(`${app.globalData.baseURL}/tenement/v2/api/apartment`, data).then(res => {
+            if (res.code === 200) {
+                let data = res.data.data
+                let List = []
+                let arr = []
+                let obj = {}
+                if (data.length) {
+                    let dataObj = {
+                        iconPath: "/img/lucency.png",
+                        width: 10,
+                        height: 10,
+                        // joinCluster: true,
+                        customCallout: {
+                            anchorY: 0,
+                            anchorX: 0,
+                            display: 'ALWAYS',
+                        },
+                    }
+                    data.map((res, index) => { //latitude longitude
+                        List.push({
+                            latitude: res.coordinate.split(',')[0],
+                            longitude: res.coordinate.split(',')[1],
+                            imageurl: res.image,
+                            brand: res.company,
+                            id: index + 1,
+                            ...dataObj,
+                            ...res
+                        })
+                        res.id = index + 1
+                        arr.push(List[index].id)
+                        obj[List[index].id] = {
+                            title: 'HK$ ' + res.rentprice,
+                            coordinateDisplay:true,//判断是否显示坐标
+                            association:[],//相同坐标
+                        }
+                    })
+                }
+                obj=this.checkCoordinate(obj,List)
+                this.setData({
+                    cloneInfo: res.data.contact,
+                    count: res.data.count,
+                    areaMarkerList: List,
+                    areaMarkerIds: arr,
+                    areaMarkerIdsObj: obj,
+                    latitude: List[0] ? List[0].latitude : '',
+                    longitude: List[0] ? List[0].longitude : '',
+                    apartmentObj: List[0],
+                })
+                this.scrollChange()
+            }
+        })
+    },
+    onReady() {
+        wx.getSystemInfo({
+            success: (res) => {
+                console.log(res)
+                this.setData({
+                    windowHeight: res.windowHeight
+                })
+            }
+        })
+        this.getSelectList()
+        this.getHouseList()
+    },
+    onLoad(options) {
+        // this.mapCtx = wx.createMapContext('map')
+        // this.mapCtx.on('markerClusterClick', res => {
+        //     console.log('markerClusterClick', res)
+        // })
+        var that = this;
+        // this.getMapContxt()
+        this.get_config()
+    },
+    onShow() {},
+    onHide() {},
+    onUnload() {
+        this._observer.disconnect()
+    },
+    onReachBottom() {
+
+    },
+    onShareAppMessage() {
+
+    }
+})

pages/placeMap/index.json

@@ -0,0 +1,6 @@
+{
+  "enablePullDownRefresh": false,
+  "usingComponents": {
+    "list-operations": "/template/listOperations/listOperations"
+  }
+}

pages/placeMap/index.wxml

@@ -0,0 +1,197 @@
+<import src="../common/common" />
+<view class="container" style="position:fixed;top:0;left:0;">
+    <view class="top-tool-box">
+        <view class="header-box" style="height: {{ screen_data['totalTopHeight'] }}px;">
+            <view class="top-tab-box" style="padding-top: {{ screen_data['statusBarHeight'] }}px;height: {{ screen_data['titleBarHeight'] }}px;box-sizing: content-box;">
+                <view class="back flexcenter">
+                    <image class="back-icon" mode="heightFix" src="/img/back.png" bindtap="backPerson"></image>
+                </view>
+                <view class="header-tab top-tab-box" style="margin-top:14rpx;">
+                    <view class="header-tab-item {{ index == headerObjTab ? 'pitch' : '' }}" wx:for="{{ headerObj }}" wx:key="index" bindtap="setValue" data-key="headerObjTab" data-value="{{ index }}">{{ item }}</view>
+                </view>
+            </view>
+        </view>
+        <view style="position: fixed;top:0;left:0;z-index: 666;width:100vw;background:#fff;" wx:if="{{headerObjTab==='apartment'&&placePopBox}}">
+            <view class="header-box" style="height: {{ screen_data['totalTopHeight'] }}px;">
+                <view class="top-tab-box" style="padding-top: {{ screen_data['statusBarHeight'] }}px;height: {{ screen_data['titleBarHeight'] }}px;box-sizing: content-box;position: relative;">
+                    <view class="back flexcenter" style="position: absolute;">
+                        <image class="back-icon" mode="heightFix" style="transform:rotate(270deg);" src="/img/back.png" bindtap="showPlacePopBox"></image>
+                    </view>
+                    <view class="place-pop-box-title">
+                        公寓
+                    </view>
+                </view>
+            </view>
+        </view>
+        <view class="tab-box" style="display: flex;top:{{screen_data['totalTopHeight']+100 }}rpx" wx:if="{{headerObjTab==='person'&&!showPlace}}">
+            <view class="tab-item flex1 flexcenter {{ tabValue == 'area' ? 'pitch' : '' }}" bindtap="switchTab" data-type='area'>
+                按区域
+            </view>
+            <view class="tab-item flex1 flexcenter {{ tabValue == 'school' ? 'pitch' : '' }}" bindtap="switchTab" data-type='school'>
+                按学校
+            </view>
+        </view>
+        <view wx:elif="{{headerObjTab==='person'&&showPlace}}" style="top:{{screen_data['totalTopHeight']+60}}rpx" class="tool-btn-box dis-f">
+            <list-operations style="width:100%;" property="{{ property }}" school="{{ school }}" types="{{ types }}" location="{{ location }}" operationstype="placeSelect" money="{{ money }}" brands="{{ brands }}" screen_data="{{ screen_data }}" roomtype="{{ roomtype }}" roomlistings="{{ roomlistings }}" bindsubmit="submitOperations"></list-operations>
+        </view>
+        <view wx:if="{{headerObjTab==='apartment'}}" class="tool-btn-box pos-r dis-f" style="z-index:999;">
+            <view style="position:fixed;left:0;top:{{screen_data['titleBarHeight']+screen_data['statusBarHeight']}}px;width:100vw;z-index:230;background:#fff;">
+                <list-operations style="width:100%;" operationstype="student" money="{{ money }}" brands="{{ brands }}" screen_data="{{ screen_data }}" roomtype="{{ roomtype }}" roomlistings="{{ roomlistings }}" bindsubmit="submitOperations"></list-operations>
+            </view>
+            <view class="place-pop-box" wx:if="{{placePopBox}}" style="height:{{windowHeight-screen_data['totalTopHeight']}}px">
+                <view style="height:{{screen_data['titleBarHeight']}}px">
+
+                </view>
+                <view style="padding:0 30rpx;">
+                    <view class="place-information dis-f al-item">
+                        共
+                        <view style="font-weight: 650;margin:0 10rpx 0 10rpx">
+                            {{count}}
+                        </view>
+                        套房源
+                    </view>
+                    <view wx:if="{{headerObjTab==='person'}}">
+                        <common-list wx:for="{{ placeInfoList }}" wx:key="index" item="{{ item }}">{{ index }}</common-list>
+                    </view>
+                    <view class="inEnd flexcenter" wx:if="{{headerObjTab==='person'}}">到底了</view>
+                    <template is='apartment-item' wx:if="{{headerObjTab==='apartment'&&areaMarkerList.length>0}}" wx:for="{{areaMarkerList}}" data="{{item}}" wx:key="index" data-uniqid='{{item.uniqid}}'>
+                    </template>
+                    <template is="empty-icon" wx:if="{{headerObjTab==='apartment'&&areaMarkerList.length===0}}">
+                    </template>
+                    <view wx:if="{{headerObjTab==='apartment'&&areaMarkerList.length>0}}">
+                        <view class="dis-f jus-x al-item btm-tps-text" wx:if="{{headerObjTab==='apartment'}}">
+                            有疑问？ 来找
+                            <image src="../../img/smiling-face.png" class="btm-tps-img" mode="" />
+                            {{cloneInfo.nickname}}！
+                        </view>
+                        <view class="dis-f jus-x al-item" wx:if="{{headerObjTab==='apartment'}}">
+                            <view class="btm-tps-btn" bindtap="cloneBtn">
+                                复制微信号
+                            </view>
+                        </view>
+                    </view>
+                </view>
+            </view>
+        </view>
+    </view>
+    <view class="map">
+        <map id="map" longitude="{{longitude}}" latitude="{{latitude}}" markers="{{headerObjTab==='apartment'?areaMarkerList:showPlace?priceList:markersList}}" scale="{{mapScale}}" style="width: 100%; height: 100%;" bindcallouttap="callouttap"  enable-scroll="{{mapEnableScroll}}">
+            <cover-view slot="callout" style="position: relative;">
+                <block wx:for="{{headerObjTab==='apartment'?areaMarkerIds:showPlace?priceIdList:customCalloutMarkerIds}}" wx:key="index">
+                    <cover-view 
+                    class="customCallout {{headerObjTab==='apartment'||showPlace?'price-box':tabValue==='school'?'':'circles'}} {{headerObjTab==='apartment'&&!areaMarkerIdsObj[item].coordinateDisplay?'dis-n':''}}" 
+                    marker-id="{{item}}">
+                        <cover-view class="{{(showPlace&&selectPlacePrice.id===item)||apartmentObj.id===item?'check-place-box':'place-price-box'}} {{headerObjTab==='apartment'&&apartmentObj.id!=item?'apartment-text':''}}">
+                            {{headerObjTab==='apartment'?areaMarkerIdsObj[item].title:showPlace?placePriceList[item].title :customCalloutMarkerIdsObj[item].title }}
+                        </cover-view>
+                        <cover-image src="../../img/downIcon.png" class="check-place-box-triangle" wx:if="{{headerObjTab==='apartment'&&apartmentObj.id===item?true:showPlace&&selectPlacePrice.id===item?true :false}}" mode="" />
+                        <!-- <cover-view class="{{showPlace&&selectPlacePrice.id===item||apartmentObj.id===item?'check-place-box-triangle':''}}">
+                        </cover-view> -->
+                        <cover-view class="{{tabValue==='school'?'name':''}}" wx:if="{{headerObjTab==='apartment'?false:true}}" hidden='{{showPlace?true:false}}'>{{ customCalloutMarkerIdsObj[item].num }}套</cover-view>
+                    </cover-view>
+                </block>
+            </cover-view>
+        </map>
+    </view>
+    <!-- bindscroll='scrollChange' -->
+    <view class="place-info-box">
+        <scroll-view scroll-x="true" style="height:380rpx" enhanced="true" id='apartmentView' paging-enabled="true" enable-flex='true' scroll-into-view="{{personListId}}" scroll-with-animation class="place-list dis-f al-item" wx:if="{{headerObjTab==='person'&&showPlace&&selectPlacePrice.id}}">
+            <view wx:for="{{priceList}}" wx:key="index" class="pos-id" id="{{'Marker'+item.id}}" 
+            data-num='{{index}}' data-uniqid='{{item.uniqid}}' bindtap="publicJumps">
+                <view class="place-list-box">
+                    <image src="../../img/20230609113522.png" mode="aspectFit" class="place-list-confirm-img" alt="" />
+                    <view class="dis-f al-item">
+                        <view class="title-tab">
+                            整租
+                        </view>
+                        <view class="title">
+                            尖沙咀地铁口旁，交通生活便利，靓装1房放1111111111
+                        </view>
+                    </view>
+                    <view class="dis-f place-list-info-box">
+                        <view class="dis-f place-info">
+                            <view class="tab-text">
+                                {{1}} · {{2}} · {{3}} · {{4}}
+                                <view class="dis-f" style="margin-top:14rpx;">
+                                    <view class="currency">
+                                        HK$
+                                    </view>
+                                    <view class="price">
+                                        9500
+                                    </view>
+                                    <view class="interval-time">
+                                        /月
+                                    </view>
+                                </view>
+                            </view>
+                            <view class="dis-f al-item" style="margin-top:16rpx;">
+                                <img src="" alt="" class="release-info-img" />
+                                <view class="release-info-text">
+                                    123
+                                </view>
+                                <view class="release-info-btn dis-f jus-x al-item">
+                                    招室友
+                                </view>
+                                <image src="../../img/intermediary.png" class="confirm-intermediary-img" mode="aspectFit" />
+                            </view>
+                        </view>
+                        <view class="place-img">
+                        </view>
+                    </view>
+                </view>
+            </view>
+        </scroll-view>
+        <!-- bindscroll='scrollChange' wx:elif="{{headerObjTab==='apartment'}}"   -->
+        <scroll-view scroll-x="true" style="height:350rpx" enhanced="true" id='apartmentView' paging-enabled="true" hidden="{{headerObjTab!=='apartment'}}" enable-flex='true' class="place-list dis-f al-item" scroll-into-view="{{apartmentListId}}" scroll-with-animation>
+            <view wx:for="{{areaMarkerList}}" wx:key="index" class="pos-id" id="{{'Marker'+item.id}}" data-num='{{index}}'
+            data-uniqid='{{item.uniqid}}' bindtap="publicJumps">
+                <view class="place-list-box dis-f al-item" style="padding:0;background:#000;" data-id="{{item.id}}">
+                    <view class="apartment-img-box">
+                        <view class="apartment-img">
+                            <image src="{{item.image}}" class="img" mode="aspectFill" />
+                        </view>
+                        <view style="width:260rpx;height:186rpx;">
+
+                        </view>
+                        <view class="apartment-title-text">
+                            {{item.brand}}
+                        </view>
+                    </view>
+                    <view class="apartment-info-box">
+                        <view class="title">
+                            {{item.title}}
+                        </view>
+                        <view class="introduce">
+                            {{item.propaganda}}
+                        </view>
+                        <view class="house-type">
+                            共{{item.roomnum}}个房型
+                        </view>
+                        <view class="dis-f" style="margin-top:20rpx;">
+                            <view class="currency">
+                                HK$
+                            </view>
+                            <view class="price">
+                                {{item.rentprice}}
+                            </view>
+                            <view class="interval-time">
+                                /月起
+                            </view>
+                        </view>
+                    </view>
+                </view>
+            </view>
+            <!--  -->
+        </scroll-view>
+        <!--  -->
+        <view class="info-box" bindtap="showPlacePopBox" wx:if="{{headerObjTab==='apartment'||headerObjTab==='person'&&showPlace}}">
+            <view class="dis-f jus-x al-item">
+                <image src="../../img/placeLogo.svg" class="img" mode="aspectFit" />
+            </view>
+            <view class="title">
+                共 {{count}} 个品牌公寓
+            </view>
+        </view>
+    </view>
+    <!-- 弹窗 -->
+</view>

pages/placeMap/index.wxss

@@ -0,0 +1,582 @@
+/* pages/placeMap/placeMap.wxss */
+@import "../common/common.wxss";
+
+page {
+    height: 100%;
+}
+.pos-id{
+    position: relative;
+}
+
+.pos-r {
+    position: relative;
+}
+
+.map-box {
+    display: flex;
+    flex: 1;
+    width: 100vw;
+    position: relative;
+}
+.top-tool-box{
+    position: absolute;
+    z-index: 333;
+    top: 0;
+    left: 0;
+    width: 100vw;
+}
+
+.top-tab-box {
+    display: flex;
+    align-items: center;
+    margin-bottom: 20rpx;
+}
+
+.customCallout {
+    box-sizing: border-box;
+    /* background-color: #fff; */
+    border: 1px solid #ccc;
+    border-radius: 30px;
+    /* width: 232.5rpx; */
+    width: max-content;
+    height: 72rpx;
+    color: #ffffff;
+    display: inline-flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 24rpx;
+    font-size: 22rpx;
+    border-radius: 24rpx;
+    position: relative;
+    background-color: rgba(51, 51, 51, 1);
+    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.349019607843137);
+}
+
+.circles {
+    width: 130rpx;
+    height: 130rpx;
+    border-radius: 65rpx;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 20rpx;
+    font-size: 22rpx;
+    line-height: 130rpx;
+    flex-wrap: wrap;
+}
+
+.name {
+    margin-left: 25rpx;
+}
+
+.header-box {
+    background-color: #ffffff;
+}
+
+.header-box .back {
+    padding: 0 32rpx;
+    height: 100%;
+}
+
+.header-box .back .back-icon {
+    width: 12px;
+    height: 18px;
+}
+
+.header-box .header-tab-item {
+    padding: 0 24rpx;
+    font-size: 30rpx;
+    color: #555555;
+}
+
+.header-box .header-tab-item.pitch {
+    color: #000000;
+    font-weight: 650;
+    position: relative;
+}
+
+.header-box .header-tab-item.pitch::after {
+    position: absolute;
+    bottom: -6rpx;
+    left: 50%;
+    transform: translateX(-50%) translateY(100%);
+    background-color: rgba(253, 218, 85, 1);
+    width: 58.5rpx;
+    height: 6rpx;
+    border-radius: 58.5rpx;
+    content: "";
+
+}
+
+.map {
+    width: 100vw;
+    height: 100vh;
+    /* flex: 1;
+    max-height:90vh; */
+}
+
+.tab-box {
+    z-index: 1000;
+    position: absolute;
+    top: 21rpx;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 310rpx;
+    height: 56rpx;
+    border-radius: 157.5rpx;
+    background-color: rgba(246, 246, 246, 1);
+    font-size: 24rpx;
+    color: #555555;
+    box-shadow: 0 0 12rpx rgba(0, 0, 0, 0.407843137254902);
+    justify-content: space-between;
+}
+
+.tab-box .tab-item {
+    height: 100%;
+    display: flex;
+    align-items: center;
+    font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
+    font-weight: 400;
+    font-style: normal;
+    font-size: 26rpx;
+    color: #555555;
+    padding: 0 10rpx;
+    width: 176rpx;
+    justify-content: center;
+}
+
+.tab-box .tab-item.pitch {
+    background-color: rgba(242, 82, 101, 1);
+    border-radius: 157.5rpx;
+    color: #ffffff;
+    font-weight: 650;
+}
+
+.dis-f {
+    display: flex;
+}
+
+.jus-x {
+    justify-content: center;
+}
+
+.al-item {
+    align-items: center;
+}
+
+.tool-btn-box {
+    align-items: center;
+    justify-content: space-around;
+    /* position: absolute; */
+    /* top: 0; */
+    /* left: 0; */
+    width: 100%;
+    display: flex;
+    align-items: center;
+    /* z-index: 666; */
+    background-color: #fff;
+    flex-wrap: wrap;
+}
+
+.tool-btn-box .line-box {
+    width: 4rpx;
+    height: 34rpx;
+    background: #f2f2f2;
+
+}
+
+.btn-box {
+    align-items: center;
+    font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
+    font-weight: 400;
+    font-style: normal;
+    font-size: 32rpx;
+    color: #7F7F7F;
+    height: 110rpx;
+    width: 33%;
+    justify-content: center;
+}
+
+.down-btn-box {
+    width: 32rpx;
+    height: 32rpx;
+    border-radius: 16rpx;
+    margin-left: 20rpx;
+    background: rgba(229, 232, 240, 1);
+    justify-content: center;
+    align-items: center;
+}
+
+.select-true-btn {
+    background: #000;
+}
+
+.down-btn-box .img {
+    width: 16rpx;
+    height: 16rpx;
+}
+
+.price-box {
+    background: transparent;
+    min-width: 160rpx;
+    font-size: 22rpx;
+    color: #7F7F7F;
+    text-align: center;
+    display: flex;
+    justify-content: center;
+    font-family: PingFangSC-Regular, "PingFang SC", sans-serif;
+    font-weight: 400;
+    padding:0 10rpx;
+    border:0px solid;
+    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0);
+}
+
+.place-info-box {
+    position: fixed;
+    bottom: 0;
+    z-index:200;
+}
+
+.place-info-box .info-box {
+    width: 100vw;
+    /* height: 200rpx; */
+    padding: 20rpx 0 50rpx 0;
+    background: inherit;
+    background-color: rgba(255, 255, 255, 1);
+    border: none;
+    border-bottom: 0px;
+    border-radius: 80rpx;
+    border-bottom-right-radius: 0px;
+    border-bottom-left-radius: 0px;
+    -moz-box-shadow: 0px 0px 16rpx rgba(0, 0, 0, 0.156862745098039);
+    -webkit-box-shadow: 0px 0px 16rpx rgba(0, 0, 0, 0.156862745098039);
+    box-shadow: 0px 0px 16rpx rgba(0, 0, 0, 0.156862745098039);
+}
+
+.place-info-box .info-box .img {
+    width: 32rpx;
+    height: 32rpx;
+}
+
+.place-info-box .info-box .title {
+    font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
+    font-weight: 400;
+    font-style: normal;
+    font-size: 26rpx;
+    color: #555555;
+    text-align: center;
+    margin-top: 20rpx;
+}
+
+.place-price-box {
+    width: 140rpx;
+    border-radius: 50rpx;
+    padding:15rpx 0;
+    font-size: 22rpx;
+    font-family: PingFangSC-Regular, "PingFang SC", sans-serif;
+    font-weight: 400;
+    font-style: normal;
+    position: relative;
+    z-index:200;
+    /* line-height: 50rpx; */
+}
+.apartment-text{
+    background: #fff;
+    border:1px solid #ccc;
+}
+.check-place-box {
+    width: 140rpx;
+    border-radius: 50rpx;
+    padding:15rpx 10rpx;
+    background: #000;
+    font-size: 22rpx;
+    color: #FDDF6D;
+    font-family: PingFangSC-Regular, "PingFang SC", sans-serif;
+    font-weight: 400;
+    font-style: normal;
+    position:absolute;
+    z-index:260;
+    border:1px solid transparent;
+    /* line-height: 50rpx; */
+}
+.dis-n{
+    display: none;
+}
+.check-place-box-triangle{
+    width: 20rpx;
+    height:20rpx;
+    object-fit: contain;
+    /* border-style: solid; */
+    /* border-color: #000 transparent transparent transparent; */
+    /* border-width: 10rpx; */
+    position: absolute;
+    bottom:-5rpx;
+}
+
+.place-list {
+    overflow-x: scroll;
+    white-space: nowrap;
+    width:100vw;
+}
+
+.place-list-box {
+    width: 690rpx;
+    border-radius: 20rpx;
+    padding:30rpx 20rpx;
+    background: #fff;
+    margin-left: 20rpx;
+    box-shadow: 0rpx 0rpx 20rpx rgba(0, 0, 0, 0.5);
+    position: relative;
+}
+.place-list-box .apartment-info-box{
+    border-radius:0 20rpx 20rpx 20rpx;
+    padding:25rpx 20rpx;
+    background:#fff;
+    height:246rpx;
+    width: 100%;
+    position: absolute;
+    z-index:555;
+    top:0;
+    left:254rpx;
+    width: 442rpx;
+}
+.place-list-box .apartment-info-box .title{
+    font-family: 'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC', sans-serif;
+    font-weight: 650;
+    font-style: normal;
+    font-size: 32rpx;
+    color: #000000;
+    margin-left:0;
+}
+.place-list-box .apartment-info-box .introduce{
+    font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
+    font-weight: 400;
+    font-style: normal;
+    font-size: 22rpx;
+    margin-top:20rpx;
+}
+.place-list-box .apartment-info-box .house-type{
+    font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
+    font-weight: 400;
+    font-style: normal;
+    color: #AAAAAA;
+    font-size:22rpx;
+    margin-top:20rpx;
+}
+.place-list-box .apartment-img-box{
+    width: 270rpx;
+    border-radius: 20rpx 20rpx 0 20rpx;
+    background:#000;
+}
+.place-list-box .apartment-img-box .apartment-img{
+    width: 270rpx;
+    height: 187rpx;
+    border-radius:20rpx 20rpx 0 20rpx;
+    background:#fff;
+    position: absolute;
+    top:0;
+    left:0;
+    z-index:666;
+}
+.place-list-box .apartment-img-box .apartment-img .img{
+    width:254rpx;
+    height:188rpx;
+    border-radius:20rpx 20rpx 0 20rpx;
+    background:#ccc;
+}
+.place-list-box .apartment-img-box .apartment-title-text{
+    height:60rpx;
+    width: 240rpx;
+    text-align: center;
+    line-height:60rpx;
+    font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
+    font-weight: 400;
+    font-style: normal;
+    font-size: 24rpx;
+    color: #FDDA55;
+}
+
+.place-list-box .place-list-confirm-img{
+    width:140rpx;
+    height:140rpx;
+    position: absolute;
+    top:-8rpx;
+    right:-10rpx;
+    z-index: 666;
+    object-fit: contain;
+}
+
+.place-list-box .title {
+    font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
+    font-weight: 400;
+    font-style: normal;
+    font-size: 30rpx;
+    color: #000000;
+    width: 400rpx;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    -o-text-overflow: ellipsis;
+    margin-left:15rpx;
+}
+
+.place-list-box .title-tab {
+    font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
+    font-weight: 400;
+    font-style: normal;
+    font-size: 26rpx;
+    color: #FDDF6D;
+    background: #000;
+    border-radius: 8rpx;
+    text-align: center;
+    padding: 4rpx 15rpx;
+}
+.place-list-box .place-list-info-box{
+    justify-content: space-between;
+    align-items: center;
+    margin-top: 30rpx;
+}
+.place-list-box .place-img{
+    width: 140rpx;
+    height: 163rpx;
+    border-radius:14rpx;
+    object-fit: contain;
+    /* margin-top:20rpx; */
+    background:#555555;
+}
+.place-list-box .place-info{
+    flex-direction: column;
+    justify-content: space-between;
+    height:163rpx;
+}
+.place-list-box .tab-text{
+    font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
+    font-weight: 400;
+    font-style: normal;
+    font-size: 24rpx;
+    color: #555555;
+}
+.place-list-box .currency{
+    font-family: 'Arial-Black', 'Arial Black', sans-serif;
+    font-weight: 900;
+    color: #000000;
+    font-size:24rpx;
+    line-height:46rpx;
+}
+.place-list-box .price{
+    font-family: 'Arial-Black', 'Arial Black', sans-serif;
+    font-weight: 900;
+    font-size: 32rpx;
+    color: #F95D5D;
+    line-height:38rpx;
+    margin-left:10rpx;
+}
+.place-list-box .interval-time{
+    font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
+    font-weight: 400;
+    font-style: normal;
+    font-size: 21rpx;
+    color: #555555;
+    line-height:43rpx;
+    margin-left:10rpx;
+}
+.place-list-box .place-info .release-info-img{
+    width:30rpx;
+    height:30rpx;
+    border-radius:15rpx;
+}
+.place-list-box .place-info .release-info-text{
+    font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
+    font-weight: 400;
+    font-style: normal;
+    font-size: 26rpx;
+    color: #555555;
+    margin-left:20rpx;
+}
+.place-list-box .place-info .release-info-btn{
+    padding:0 10rpx;
+    height: 40rpx;
+    background: inherit;
+    background-color: rgba(242, 242, 242, 0);
+    box-sizing: border-box;
+    border-width: 1rpx;
+    border-style: solid;
+    border-color: rgba(215, 215, 215, 1);
+    border-radius: 23rpx;
+    -moz-box-shadow: none;
+    -webkit-box-shadow: none;
+    box-shadow: none;
+    font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
+    font-weight: 400;
+    font-style: normal;
+    font-size: 22rpx;
+    color: #555555;
+    margin-left:20rpx;
+    line-height: 40rpx;
+}
+.place-list-box .place-info .confirm-intermediary-img{
+    width:120rpx;
+    height:30rpx;
+    margin-left:30rpx;
+}
+
+.place-pop-box{
+    width:100vw;
+    height:100vh;
+    z-index: 220;
+    overflow-y: scroll;
+    background:#f6f6f6;
+}
+.place-pop-box-title{
+    font-family: 'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC', sans-serif;
+    font-weight: 650;
+    font-style: normal;
+    font-size: 35rpx;
+    margin:0 auto;
+}
+.place-pop-box .place-information{
+    font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
+    font-weight: 400;
+    color: #555555;
+    font-style: normal;
+    font-size: 24rpx;
+    height:86rpx;
+    margin-top:30rpx;
+}
+.btm-tps-text{
+    font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
+    font-weight: 400;
+    font-style: normal;
+    font-size: 23rpx;
+    color: #7F7F7F;
+    margin-top:60rpx;
+}
+.btm-tps-img{
+    width:28rpx;
+    height:28rpx;
+    margin:0 10rpx;
+}
+.btm-tps-btn{
+    width: 280rpx;
+    height: 67rpx;
+    background: inherit;
+    background-color: rgba(217, 236, 255, 1);
+    border: none;
+    border-radius: 82rpx;
+    -moz-box-shadow: 0px 0px 16rpx rgba(98, 177, 255, 0.0784313725490196);
+    -webkit-box-shadow: 0px 0px 16rpx rgba(98, 177, 255, 0.0784313725490196);
+    box-shadow: 0px 0px 16rpx rgba(98, 177, 255, 0.0784313725490196);
+    font-family: 'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC', sans-serif;
+    font-weight: 650;
+    font-style: normal;
+    font-size: 28rpx;
+    color: #62B1FF; 
+    text-align: center;
+    line-height:67rpx;
+    margin:30rpx 0 60rpx 0;
+}
+.inEnd {
+    color: #aaaaaa;
+    margin: 0 auto;
+    font-size: 21rpx;
+}