// 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: "school", // area school longitude: 113.36110, //默认定位经度 latitude: 23.12463, //默认定位纬度 mapScale: 11, //地图大小 showPlace: false, //显示地方详情 //公寓地区id areaMarkerIds: [], //公寓地区内容 areaMarkerIdsObj: {}, //公寓数据 areaMarkerList: [], customCalloutMarkerIds: [], //按区域/学校数据 customCalloutMarkerIdsObj: {}, //按学校数据 markersList: [], //地区房价数据 priceList: [], //个人/中介地区房源筛选列表 selectPriceList: [], //地区房价ID priceIdList: [], //地区房价 placePriceList: {}, //用户所选地区 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: "0", } }, brands: { //品牌 list: [], value: '', obj: {} }, roomlistings: { //楼型 list: [], value: '', obj: {} }, roomtype: { //房型 list: [], value: '', obj: {} }, //当前地区全部房源数据 placeAllList: [], //语言包 langs: '', //防抖 mapSelectCan: true, //是否设置加载 mapCoordinateSet: true, //是否可以加载更多数据 loadingMoreData: true, //设置地图房源列表滚动条高度 mapSelectScrollTop: 0, //是否初次加载地区 mapFirstLoading: true, platform:'',//平台 mapMarkerTime:'',//计时器 }, get_config() { var that = this; if (app.globalData.config && app.globalData.config.lists) { this.setData({ screen_data: app.globalData.screen_data, }) this.getSelectList() this.getHouseList() this.getDtailsLangs() } else { setTimeout(function () { that.get_config() }, 10) } }, // 切换学校/区域 switchTab(e) { this.setData({ tabValue: e.currentTarget.dataset.type, markersList:[] }) this.getHouseList() }, showPlacePopBox() { this.setData({ placePopBox: !this.data.placePopBox, selectPriceList:[] }) if (this.data.headerObjTab === 'apartment') return if(this.data.placePopBox)this.getSelectPlaceList() this.setListOperations() }, //查看详情 publicJumps(e) { let uniqid = e.currentTarget.dataset.uniqid let url = e.currentTarget.dataset.url if (url) { wx.navigateTo({ url, }) } else { if (this.data.headerObjTab === 'apartment') { wx.navigateTo({ url: `/pages/brandApartmentDetail/brandApartmentDetail?uniqid=${uniqid}`, }) } else { wx.navigateTo({ url: `/pages/show/show?uniqid=${uniqid}`, }) } } }, //设置筛选属性 setListOperations() { const listOperations = this.selectComponent('#listOperations'); listOperations.setSelectData(!this.data.placePopBox); }, //监听滚动条 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 // console.log(num) if (!num && num != 0) return if (this.data.headerObjTab === 'apartment') { if (this.data.apartmentObj.id === this.data.areaMarkerList[num].id) return } else if (this.data.headerObjTab === 'person') { if (this.data.selectPlacePrice.id === this.data.priceList[num].id) return } this.setNowMarker(num) }) }, //设置当前房间列表id setNowMarker(num) { if (this.data.headerObjTab !== 'apartment') { let List = JSON.parse(JSON.stringify(this.data.priceList)) List.map(res => { res.zIndex = 0 }) List[num].zIndex = 666 this.setData({ priceList: List, selectPlacePrice: List[num], longitude: this.data.priceList[num].longitude, latitude: this.data.priceList[num].latitude, }) } else if (this.data.headerObjTab === 'apartment') { let obj = this.data.areaMarkerIdsObj[this.data.areaMarkerList[num].id] this.data.areaMarkerList[this.data.apartmentObj.id - 1].zIndex = 0 this.data.areaMarkerList[num].zIndex = 666 this.setData({ areaMarkerList: this.data.areaMarkerList, areaMarkerIdsObj: this.data.areaMarkerIdsObj, apartmentObj: this.data.areaMarkerList[num], longitude: this.data.areaMarkerList[num].longitude, latitude: this.data.areaMarkerList[num].latitude, }) } }, callouttap(e) { //点击地图marker let id = e.detail.markerId; console.log(id) let object = null; if (this.data.headerObjTab === 'apartment') { //公寓 this.data.areaMarkerList.find((obj) => { if (obj.id === id) { object = obj obj.zIndex = 666 } }) this.setData({ areaMarkerList: this.data.areaMarkerList, apartmentListId: 'Marker' + object.id, apartmentObj: object, }) } else if (this.data.showPlace && this.data.headerObjTab !== 'apartment') { //点击个人/中介地区房源 this.data.priceList.find((obj) => { if (obj.id === id) object = obj }) this.setData({ selectPlacePrice: object, personListId: 'Marker' + object.id }) this.scrollChange() } else { //个人/中介地区 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], showPlace: true, mapScale: 15, latitude: object.latitude, longitude: object.longitude, mapFirstLoading: true, }) // console.log('object', object) this.getPlaceList() // this.getSelectPlaceList() //个人/中心房源搜索 this.setListOperations() //获取房价元素宽度 this.getPlaceWidth() } }, 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 this.setData({ loadingMoreData: true, mapSelectScrollTop: 0 }) 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 { if (this.data.showPlace) { this.getSelectPlaceList() } else { this.getPlaceList() } } }, // 选择房型 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() }, //获取房源筛选 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 this.setData({ [key]: value, mapScale: 11, showPlace: false, loadingMoreData: true, listCount:null }) this.clearScreen() if (value === 'apartment') { this.getApartmentList() } else { this.getHouseList() } this.getPlaceWidth() }, //地图视野变化 mapViewChange(type, causedBy) { if (type.type === 'begin' && type.causedBy === "gesture") { this.setData({ selectPlacePrice: {} }) } if (type.type === 'end' && type.causedBy === "drag" && this.data.showPlace && this.data.headerObjTab !== 'apartment') { //地图移动获取数据 this.getPlaceList(`${type.detail.centerLocation.latitude},${type.detail.centerLocation.longitude}`) } else if (type.type === 'end' && type.causedBy === "scale" && this.data.showPlace && this.data.headerObjTab !== 'apartment') { if (type.detail.scale > 12) return this.clearScreen() this.backPerson() this.setData({ mapCoordinateSet: true, selectPlacePrice: {}, pages: 1, }) } }, //返回选择学校/区域页面 backPerson() { this.clearScreen() if (this.data.showPlace) { this.setData({ loadingMoreData: true, mapFirstLoading: true, selectPlace: '', showPlace: false, mapScale: 11, priceList: [], priceIdList: null, selectPlacePrice: null, listCount:null }) } else { wx.navigateBack({ fail: function () { wx.navigateTo({ url: '/pages/index/index', }) } }) } }, // //个人/中介加载更多 loadingMore() { if (!this.data.loadingMoreData) return this.setData({ pages: ++this.data.pages }) this.getSelectPlaceList() }, //解析数据列表坐标参数 getDataList(data, setLangs = false) { let List = [] let arr = [] let obj = {} let repeatArr={} if (data.length) { let dataObj = { iconPath:this.data.platform==='windows'?"/mapFind/img/pcMarker.png":'/img/lucency.png', width: this.data.platform==='windows'?20:0, height: this.data.platform==='windows'?20:0, joinCluster: this.data.headerObjTab !== 'apartment' && this.data.showPlace ? false : false, customCallout: { anchorY: 0, anchorX: 0, display: 'ALWAYS', }, // callout: { // content:'1', // anchorY: 0, // anchorX: 0, // display: 'ALWAYS', // }, // label:{ // content:'1', // anchorY: 0, // anchorX: 0, // display: 'ALWAYS', // } } data.map((res, index) => { //latitude longitude if (this.data.showPlace || this.data.headerObjTab === 'apartment' ? true : res.count > 0) { res.id = res.id ? res.id : index + 1 List.push({ latitude: res.center ? res.center.split(',')[1] : res.coordinate ? res.coordinate.split(',')[0] : res.point ? res.point.split(',')[1] : '', longitude: res.center ? res.center.split(',')[0] : res.coordinate ? res.coordinate.split(',')[1] : res.point ? res.point.split(',')[0] : '', imageurl: res.image, brand: res.company, ...dataObj, ...res }) if(repeatArr[res.point]){ let ojb={ id:res.id, } repeatArr[res.point].push(res.id) }else{ repeatArr[res.point]=[] repeatArr[res.point].push(res.id) } if(!setLangs||this.data.pages===1)arr.push(res.id) if(!setLangs||this.data.pages===1)obj[res.id] = { title: this.data.headerObjTab === 'person' || this.data.headerObjTab === 'intermediary' ? !this.data.showPlace ? res.name : 'HK$ ' + res.rent : 'HK$ ' + res.rentprice, num: this.data.headerObjTab === 'person' || this.data.headerObjTab === 'intermediary' ? res.count : '' } } }) List[0].zIndex = 666 } if(setLangs&&this.data.pages>1){ arr=this.data.priceIdList obj=this.data.placePriceList } if (this.data.headerObjTab !== 'apartment' && this.data.showPlace) List = this.handleDetailData(List, setLangs) if(this.data.headerObjTab !== 'apartment' && this.data.showPlace)List=this.repeatSetList(List,repeatArr) console.log(List) return { List, arr, obj } }, // windowsMarkerSet(data,type){ // this.data.mapMarkerTime=setInterval(()=>{ // let datas=JSON.parse(JSON.stringify(data)) // while(datas.length){ // let num=Math.floor(Math.random()*datas.length) // let markerNum=null // let key=null // data.map((res,index)=>{ // if(res.id===datas[num].id){ // markerNum=index // } // }) // key=`${type}[${markerNum}]` // this.setData({ // [key]:{ // ...datas[num], // alpha:datas[num].alpha?0:1 // } // }) // datas.splice(num,1) // } // // this.setData({ // // markersList:data // // }) // },500) // }, //坐标重叠处理 repeatSetList(data,idList){ let List=JSON.parse(JSON.stringify(data)) let idLists=idList for(let item in idLists){ if(idLists[item].length>1){ for(let i=0;idLists[item].length>i;i++){ for(let j=0;j { this.handleDetailData(data, setLangs) }, 300) } else { if (!data) return data.forEach(ele => { // 这个是将 详情键 替换语言包里的值 let list = ['type', 'rentalduration', 'intermediary', "property", "elevator", "sunshinearea", "gender"] if (Array.isArray(ele['floor'])) list.push('floor') // 判断 楼层是否需要 替换值, 因为在求房源里是多个值 let differentNames = { // 需要替换的 键名 "intermediary": "intermediary_text" } list.forEach(element => { if (ele[element] == -1) {} else if (ele[element] == 0) ele[differentNames[element] ? differentNames[element] : element] = '不限' // 当 值为 [0] 时为不限 else ele[differentNames[element] ? differentNames[element] : element] = langs[element][ele[element]] }) let tabArr = ["gptype", "type", "elevator", "sunshinearea", "gender"] let tabList = [] tabArr.forEach(el => { if (ele[el] && ele[el] != -1) tabList.push(ele[el]) }) ele['tabList'] = tabList let location = langs.location // 遍历替换区域的值 所有房源 let pendingData = ele['location'] ele['location'] = `${location[Math.trunc(pendingData)]} > ${location[pendingData]}` }) let lists = null if (setLangs && this.data.pages > 1) { lists = this.data.selectPriceList lists = lists.concat(data) } else { lists = data } return lists } }, //清空选项 clearScreen() { this.setData({ pages: 1, //页数 types: { //筛选组件-出租 data: this.data.types.data, value: '' }, money: { //金额 rent_min: 0, rent_max: '' }, moreCondition: { //更多 show: false, data: { gender: "0", leaseterm: "0", publish: "0", } }, brands: { //品牌 ...this.data.brands, value: '' }, roomlistings: { //楼型 ...this.data.roomlistings, value: '', }, roomtype: { //房型 ...this.data.roomtype, value: '', }, }) }, //个人/中介地区列表 getHouseList() { let data = { isintermediary: this.data.headerObjTab === 'person' ? 0 : 1 } let api = null if (this.data.tabValue === 'school') { api = miucms.request(`${app.globalData.baseURL}/tenement/v2/api/map/school`, data) } else { api = miucms.request(`${app.globalData.baseURL}/tenement/v2/api/map/district`, data) } api.then(res => { if (res.code === 200) { let data = res.data let { List, arr, obj } = this.getDataList(data) this.setData({ markersList: List, customCalloutMarkerIds: arr, customCalloutMarkerIdsObj: obj, }) if (this.data.mapCoordinateSet) { this.setData({ mapCoordinateSet: false, latitude: '22.43183', longitude:'114.13295', }) } // this.windowsMarkerSet(this.data.markersList,'markersList') } }) }, //个人/中介搜索列表 getSelectPlaceList() { wx.showLoading({}) let data = Object.assign({}, this.data.moreCondition.data, this.data.money, { token: this.data.selectPlace.token, page: this.data.pages, //当前页数 types: this.data.types.value, page: this.data.pages, limit: 20, }) console.log("this.data.selectPlace",this.data.selectPlace); miucms.request(`${app.globalData.baseURL}/tenement/v2/api/map/lists`, data).then(res => { if (res.code === 200) { let data = res.data.data let { List, arr, obj } = this.getDataList(data, true) let placeData = JSON.parse(JSON.stringify(List)).slice(0, 50) // let placeArr =JSON.parse(JSON.stringify(List)).slice(0, 30) // console.log(List) // console.log(arr) // console.log(obj,Object.keys(obj).length) if (data.length < 20) { this.setData({ loadingMoreData: false, }) } this.setData({ priceList: placeData, priceIdList: arr, placePriceList: obj, selectPriceList: List, listCount: res.data.count+'', latitude: placeData[0] ? placeData[0].latitude : '', longitude: placeData[0] ? placeData[0].longitude : '', }) wx.hideLoading() } }) }, //个人/中介房源列表 getPlaceList(location) { if (!this.data.mapSelectCan) return this.setData({ mapSelectCan: false }) let data = Object.assign({}, this.data.moreCondition.data, this.data.money, { token: this.data.selectPlace.token, page: this.data.pages, //当前页数 types: this.data.types.value, page: 1, limit: 50, location }) miucms.request(`${app.globalData.baseURL}/tenement/v2/api/map/lists`, data).then(res => { if (res.code === 200) { let data = res.data.data let { List, arr, obj } = this.getDataList(data) // console.log(this.data.mapFirstLoading, ',', location) if (this.data.mapFirstLoading) { setTimeout((res) => { this.setData({ latitude: List[0] ? List[0].latitude : '', longitude: List[0] ? List[0].longitude : '', }) },500) } // console.log(this.data.latitude, this.data.longitude, List[0]) this.setData({ mapFirstLoading: false, priceList: List, priceIdList: arr, placePriceList: obj, mapSelectCan: true }) }else{ this.setData({ mapSelectCan:true }) } }) }, //获取公寓数据 getApartmentList() { let data = Object.assign({}, this.data.money, { page: this.data.pages, //当前页数 companyid: this.data.brands.value, //品牌 roomtype: this.data.roomtype.value, //房型 roomlistings: this.data.roomlistings.value, 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, arr, obj } = this.getDataList(data) // 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() } }) }, //获取后台语言包 getDtailsLangs() { miucms.request(`${app.globalData.baseURL}/tenement/v2/api/details/langs`).then(res => { if (res.code != 200) return let data = res.data this.setData({ langs: data }) }) }, onReady() { let that = this // wx.getSystemInfo({ // success: (res) => { // this.setData({ // windowHeight: res.windowHeight // }) // } // }) setTimeout(function () { that.get_config() }, 200) }, onLoad(options) { this.mapCtx = wx.createMapContext('map') this.mapCtx.on('markerClusterClick', res => { console.log('markerClusterClick', res) }) wx.getSystemInfo({ success: (res) => { // windows | mac为pc端 // android | ios为手机端 this.setData({ platform:res.platform }) console.log(res.platform) } }); var that = this; // this.getMapContxt() // this.get_config() }, onShow() {}, onHide() {}, onUnload() { this._observer&&this._observer.disconnect() }, onReachBottom() { }, onShareAppMessage() { }, onShareTimeline() { }, })