<!--index.wxml--> <map id="map" longitude="102.6569366455" latitude="25.0821785206" scale="14" controls="{{controls}}" bindcontroltap="controltap" markers="{{markers}}" bindmarkertap="markertap" bindregionchange="regionchange" show-location class="map"></map> <view class="nearby-parkingLot"> <view class="plain-text inline-block">在您附近找到</view> <view class="left-number inline-block">3</view> <view class="plain-text inline-block">家智能停车场</view> </view> <view class="parking-list-container"> <view class="parking-list-section center" bindtap="bindParkingListItemTap"> <view class="content"> <view class="parking-list-item flex"> <view class="parking-name">科海路4号停车场</view> </view> <view class="parking-list-item flex"> <view class="u-1of2 plain-text">距您: <view class="parking-distance">50米</view> </view> <view class="plain-text">剩余车位: <view class="left-number">102</view> </view> </view> </view> <image class="arrow-right" src="/images/arrowright.png"></image> <!--<view class="menu-button">预约</view>--> </view> <view class="parking-list-section center"> <view class="content"> <view class="parking-list-item flex"> <view class="parking-name">科高路7号停车场</view> </view> <view class="parking-list-item flex"> <view class="u-1of2 plain-text">距您: <view class="parking-distance">200米</view> </view> <view class="plain-text">剩余车位: <view class="left-number">43</view> </view> </view> </view> <image class="arrow-right" src="/images/arrowright.png"></image> </view> <view class="parking-list-section center"> <view class="content"> <view class="parking-list-item flex"> <view class="parking-name">海屯路超市停车场</view> </view> <view class="parking-list-item flex"> <view class="u-1of2 plain-text">距您: <view class="parking-distance">700米</view> </view> <view class="plain-text">剩余车位: <view class="left-number">23</view> </view> </view> </view> <image class="arrow-right" src="/images/arrowright.png"></image> </view> </view> <view class="menu-annotation">更多</view> <view class="menu-list-container center"> <view class="menu-list-item"> <image src="/images/icon/day_view.png" class="menu-list-icon"></image> <view class="menu-list-text">查看全部</view> <image class="menu-arrow-right" src="/images/arrowright.png"></image> </view> <view class="bottom-btn plain u-auto" style="" bindtap="openParkingMap"> <image class="button-icon" src="/images/icon/location.png"></image> 查看车辆位置 </view> </view> |
/**index.wxss**/ .bottom-bar { background-color: white; } .map{ width:100%; height:40%; margin: 0 auto; } .parking-list-container{ margin-bottom: 15rpx; } .parking-list-section{ background-color: white; /*padding: 20rpx;*/ /*margin: 20rpx 0;*/ display: flex; /*border-bottom: 1rpx solid gainsboro;*/ border-radius: 15rpx; margin:10rpx 15rpx; } .parking-list-section:last-child{ border-bottom: none; } .parking-list-item{ margin: 15rpx; } .plain-text{ font-size: 14px; color: gray; } .parking-name{ font-size: 18px; color:black; } .left-number{ display: inline-block; color: green; font-size: 16px; } .parking-distance{ display: inline-block; font-size: 14px; color: gray; } .content{ justify-content: space-between; padding:10rpx; flex: 1 } .nearby-parkingLot{ padding: 10rpx; } |
//index.js //获取应用实例 var app = getApp() Page({ data: { markers: [{ iconPath: "/images/park.png", id: 0, latitude: 25.0821785206, longitude: 102.6569366455, width: 40, height: 48, }, { iconPath: "/images/park.png", id: 1, latitude: 25.0823145601, longitude: 102.6563519239, width: 40, height: 48, }, { iconPath: "/images/park.png", id: 1, latitude: 25.0780000901, longitude: 102.6586639881, width: 40, height: 48, }, { iconPath: "/images/park.png", id: 1, latitude: 25.0782624609, longitude: 102.6556384563, width: 40, height: 48, }], polyline: [{ points: [{ longitude: 102.6569366455, latitude: 25.0821785206 }, { longitude: 102.6569366455, latitude: 23.21229 }], color: "#FF0000DD", width: 2, dottedLine: true }] // controls: [{ // id: 1, // iconPath: '/images/car.png', // position: { // left: app.globalData.windowWidth/2-32, // top: app.globalData.windowHeight/2-84, // width: 64, // height: 64 // }, // clickable: true // }] }, onLoad: function (e) { }, regionchange(e) { console.log(e.type) }, markertap(e) { console.log(e.markerId) }, controltap(e) { console.log(e.controlId) }, bindParkingListItemTap: function () { wx.navigateTo({ url: "../detail/detail" }) }, openParkingMap: function () { wx.navigateTo({ url: '../parkinglotMap/parkinglotMap', success: function (res) { // success }, fail: function (res) { // fail }, complete: function (res) { // complete } }) } }) |
模板简介:该模板名称为【微信小程序奥多停车带地图停车场列表设计制作开发教程】,大小是,文档格式为.,推荐使用打开,作品中的图片,文字等数据均可修改,图片请在作品中选中图片替换即可,文字修改直接点击文字修改即可,您也可以新增或修改作品中的内容,该模板来自用户分享,如有侵权行为请联系网站客服处理。欢迎来懒人模板【小程序教程】栏目查找您需要的精美模板。