个人中心 | 微信开放社区

map动态设置markers，更新markers的值不显示

<map longitude="{{_lon}}" latitude="{{_lat}}" id="map" scale="{{_scale}}" markers="{{markers}}" show-location style="width: 100%; height: 100%;" bindcontroltap="controltap" bindmarkertap="markertap" bindregionchange = "regionchange" bindtap='mapClick' >  <cover-view class="parkDetail" hidden="{{inParkFlag}}"> <cover-view class="title"> <cover-view class="place-txt"> <cover-image src="../../images/place_icon.png" class="place-icon"></cover-image> <cover-view class="parking-name">{{park.parkName}}</cover-view> </cover-view> <cover-view class="add-car"> <cover-view class="i-block" bindtap='addCar' hidden='{{!carFLag}}'>添加车辆</cover-view> <cover-view class="i-block" bindtap='changeCar' hidden='{{carFLag}}'> {{defaultCarNo}} <cover-image src='../../images/u_arrow_dow.png' class='add-car-img'> </cover-image> </cover-view> </cover-view> </cover-view> <cover-view class="title-bottom"></cover-view> <cover-view class="content"> <cover-view class="center"> <cover-view class="price fleft">{{park.parkPrice}}</cover-view> <cover-view class="leftPlace"> <cover-view class="leftPlace-con">{{park.leftPlace}}</cover-view> <cover-view class="leftPlace-con">剩余车位</cover-view> </cover-view> <cover-view class="cboth"></cover-view> <cover-view> <cover-view class="view fleft" style='width:{{admissionWidth}}' bindtap='goParkingDetails'>查看</cover-view> <cover-view class="admission fleft" hidden='{{admissionFlag}}' bindtap="inPark">入场</cover-view> <cover-view class="navigation fright" style='width:{{admissionWidth}}' bindtap="goDaohang">导航</cover-view> <cover-view class="cboth"></cover-view> </cover-view> </cover-view> </cover-view> </cover-view>   <cover-view class="parkDetail" hidden='{{outParkFlag}}'> <cover-view class="title"> <cover-view class="place-txt"> <cover-image src="../../images/place_icon.png" class="place-icon"></cover-image> <cover-view class="parking-name">{{parking.parkName}}</cover-view> </cover-view> <cover-view class="add-car"> <cover-view class="i-block" bindtap='changeCar'>{{defaultCarNo}} <cover-image src='../../images/u_arrow_dow.png' class='add-car-img'></cover-image> </cover-view> </cover-view> </cover-view> <cover-view class="title-bottom"></cover-view> <cover-view class="parking-lot"> <cover-image src='../../images/u_parking.png' class="u-parking-img"></cover-image> <cover-view class='inline-block gray park-ing'>停车中...</cover-view> <cover-view class='inline-block orange park-people'>(入场时，请展示给车场管理人员)</cover-view> </cover-view> <cover-view class='parking-lot'>  <cover-view class='inline-block orange'>已分配车位：{{parking.carportNum}}</cover-view> </cover-view> <cover-view class='parking-lot'> <cover-view class='inline-block'>停车时间：</cover-view> <cover-view class='inline-block gray' style='width:60%;'>{{timing}}</cover-view> </cover-view> <cover-view class='out-park' bindtap='outPark'>出场</cover-view> </cover-view>  <cover-image src='../../images/location.png' hidden="{{user.hidden}}" class="img-location"></cover-image>  <cover-view class="back-situ" hidden="{{user.hidden}}" bindtap='moveToLocation' style='bottom:{{park.backBottom}}'> <cover-image src='../../images/my_place.png'></cover-image> </cover-view>  <cover-view class="user" hidden="{{user.hidden}}" bindtap="goUserCenter" style='bottom:{{park.backBottom}}'> <cover-image src="{{_userAverurl}}" class='user-center-img'></cover-image> </cover-view>   <cover-view class='bill-container' hidden='{{billFlag}}'> <cover-view class='bill-text'>您有未支付账单</cover-view> <cover-view class="title-bottom"></cover-view> <cover-view class='bill-btn' bindtap='toPay'>去结算</cover-view> </cover-view> </map> js: const app = getApp() const _ajax = require('../../utils/service.js'); Page({ data: { _lon: 0, _lat: 0, _scale: 18, _userAverurl: '', // 用户头像 markers: [], // 地图map的markers parkList: [], // 获取的车场数据 pickParkList: {}, // 入场数据 chooseParkList: {}, // 导航数据 viewParkList: {}, // 查看所需数据 park: { // 入场面板 backBottom: null }, user: { hidden: true }, header: {}, // 请求header tokenId: '', admissionFlag: true, // 入场按钮Flag admissionWidth: null, // 查看、导航的宽度 inParkFlag: true, // 入场面板Flag outParkFlag: true, // 出场面板Flag cannotFLag: false, // 不准操作Flag timing: '', // 停车计时 parking: { // 停车中的数据 parkGateOid: null, // 停车场出口ID parkName: '', // 停车场名称 carNum: '', // 车牌号 carportNum: '', // 车位号 parkingInDttm: null, // 确认入场时间 sysDttm: null, // 系统当前时间 }, billFlag: true, // 未支付账单Flag carList: [], // 车牌列表 carFLag: true, // 车牌FLag defaultCarNo: '', // ，默认车牌 clearInterVal: '' // 清楚定时器 }, onLoad() { wx.showLoading({ title: '定位中' }); app.uparkingLogin() }, onReady: function() { this.mapCtx = wx.createMapContext("map"); this.initMap(); }, onShow: function() { this.haveToken(); }, haveToken() { if (app.globalData.haveToken === true) { this.initParking() } else { setTimeout(() => { this.haveToken(); }, 500); } }, initParking() { this.setData({ _userAverurl: app.globalData.userInfo.headUrl, }) clearInterval(this.data.clearInterVal) // 检测是否有车牌 this.getCarList(); // 检测是否有未支付账单 this.getNoPayParkBill(); // 检测是否有停车中的状态 this.getMyNowParking(); }, initMap() { wx.getLocation({ type: 'gcj02', success: (res) => { let longitude = res.longitude; let latitude = res.latitude; app.globalData.userLocation.lon = longitude; app.globalData.userLocation.lat = latitude; // 加载了用户位置信息之后，开始进行地图初始化操作 this.initApp(); // 请求周边停车场数据 this.getAroundParkData(); }, fail: res => { wx.hideLoading(); wx.showModal({ title: '用户未授权', content: '如果需要正常使用定位功能，请点击确定并在授权管理中打开“位置”。最后再进入小程序即可正常使用', showCancel: false, success: (res) => { if (res.confirm) { console.log('用户点击确定') wx.openSetting({ success: (res) => { console.log(res) } }) } else if (res.cancel) { console.log('用户点击取消') } } }) } }); }, initApp() { // 初始化APP应用等。 // 初始化数据 this.setData({ _lon: app.globalData.userLocation.lon, _lat: app.globalData.userLocation.lat, user: { hidden: false } }); wx.hideLoading(); }, // 定位到当前位置 moveToLocation() { this.mapCtx.moveToLocation(); }, // 点击停车场标记P，显示停车场详情模态框 markertap(e) { if (this.data.cannotFLag) { return } let parkList = this.data.parkList; let admissionFlag = null; let admissionWidth = null; for (let i = 0; i < parkList.length; i++) { let park = parkList[i]; // 初始化停车场图标 if (park.entOid === '') { park.iconPath = '/images/blue_free.png'; } else { park.iconPath = '/images/red_free.png'; } // 停车场active状态 if (park.id === e.markerId) { if (park.entOid === '') { park.iconPath = '/images/blue_full.png'; } else { park.iconPath = '/images/red_full.png'; } // 非红P车场不显示”入场“按钮 if (park.entOid === '') { admissionFlag = true, admissionWidth = 50 + '%' } else { admissionFlag = false, admissionWidth = 30 + '%' } // 显示面板并展示停车场详情 this.setData({ inParkFlag: false, park: { backBottom: 310 + 'rpx', // 回到原点图片位置 parkName: park.parkName, // 车场名称 parkPrice: park.parkFirstHour + "小时内" + park.parkFirstFee + "，后续每小时" + park.parkPerHourFee, // 停车场收费情况 leftPlace: park.leftPlace + '个', // 车位 }, // 导航所需数据 chooseParkList: { id: park.id, longitude: park.longitude, latitude: park.latitude, name: park.parkGateName, address: park.address }, // 查看所需数据 viewParkList: { parkHeadUrl: park.parkHeadUrl, // 车场图片 parkName: park.parkName, // 车场名称 leftPlace: park.leftPlace, // 空余车位 address: park.address, // 详细地址 parkPrice: park.parkFirstHour + "小时内" + park.parkFirstFee + "，后续每小时" + park.parkPerHourFee, // 停车场收费情况 }, admissionFlag: admissionFlag, admissionWidth: admissionWidth, }); } this.setData({ markers: parkList }) } }, // 点击地图 mapClick() { if (this.data.cannotFLag) { return } let markerList = this.data.markers; for (let i = 0; i < markerList.length; i++) { let marker = markerList[i]; if (marker.entOid === '') { marker.iconPath = '/images/blue_free.png'; } else { marker.iconPath = '/images/red_free.png'; } this.setData({ markers: markerList, park: { backBottom: '10%' }, inParkFlag: true }); } }, // 滑动地图，end事件 regionchange(e) { if (e.type === 'end') { if (this.data.inParkFlag) { this.moveToNewLocation(); } } }, // 移动到新位置，并重新列出周边的停车场 moveToNewLocation() { this.mapCtx.getCenterLocation({ success: (res) => { this.data._lon = res.longitude; this.data._lat = res.latitude; this.getAroundParkData(); } }) }, // 车场距离排序 sortParkList: function(list) { for (var i = 0; i < list.length; i++) { //var dis = CommonTools.getDistance(this.data._lat, this.data._lon, list[i].parkGateLat, list[i].parkGateLon); //list[i].dis = dis; } //this.data.parkList = CommonTools.parkSortByDis(list); }, // 入场 inPark() { wx.showModal({ title: '入场提示', content: '确定后，即将开始计费', success: (res) => { console.log(this.data.defaultCarNo) if (res.confirm) { if (this.data.defaultCarNo === '') { wx.navigateTo({ url: '../addCar/addCar', }) } else { _ajax.post('/park/inPark', { parkId: this.data.chooseParkList.id, carNum: this.data.defaultCarNo, isScanBluetooth: '2' }, (res) => { this.getMyNowParking(); this.setData({ outParkFlag: false, cannotFLag: true }) }) } } } }) }, // 出场 outPark() { wx.showModal({ title: '出场提示', content: '确定后，请尽快离场！超过时段将产生额外费用！', success: (res) => { if (res.confirm) { _ajax.post('/park/outPark', { parkId: this.data.parking.parkGateOid, carNum: this.data.defaultCarNo, isScanBluetooth: '2' }, (res) => { console.log(res); this.setData({ inParkFlag: true, outParkFlag: true, cannotFLag: true, billFlag: false, park: { backBottom: '10%' } }) }) } else if (res.cancel) { console.log('用户点击取消') } } }) }, // 进入个人中心 goUserCenter: function() { wx.navigateTo({ url: "../userCenter/userCenter" }); }, // 导航 goDaohang() { wx.openLocation({ longitude: parseFloat(this.data.chooseParkList.longitude), latitude: parseFloat(this.data.chooseParkList.latitude), name: this.data.chooseParkList.parkGateName, address: this.data.chooseParkList.address, scale: 18 }) }, // 请求周边停车场数据 getAroundParkData() { _ajax.post('/park/getAroundParkingLotList', { longitude: this.data._lon + '', latitude: this.data._lat + '' }, (res) => { let markerList = res.data.context.list; let parkList = []; let iconPath = ''; let width = ''; let height = ''; for (let item of markerList) { if (item.entOid === '') { iconPath = '/images/blue_free.png'; width = 22; height = 32; } else { iconPath = '/images/red_free.png'; width = 42; height = 42; } parkList.push({ iconPath: iconPath, // 图标 id: +item.parkOid, // 车场id entOid: item.entOid, // 是否为公司车场，空表示不是 longitude: +item.parkGateLon, // 车场经度 latitude: +item.parkGateLat, // 车场纬度 parkGateName: item.parkGateName, // 车场位置名 address: item.address, // 车场地址的详细说明 width: width, // 图标宽度 height: height, // 图标高度 parkName: item.parkName, // 停车场名称 parkFirstHour: item.parkFirstHour, // 首次费用时间（小时） parkFirstFee: item.parkFirstFee, // 首次费用 parkPerHourFee: item.parkPerHourFee, // 后续每小时费用 leftPlace: item.leftPlace, // 剩余车位数 parkHeadUrl: item.parkHeadUrl, // 车场图片 anchor: { x: 0.5, y: 0.5 } }); } // this.sortParkList(res.data.context.list); this.setData({ parkList: parkList, markers: parkList }); }) } })

GitHub账号

选择需要上架的开放服务

案例类型