update

pages/map/testmap.js

@@ -9,13 +9,193 @@ Page({
    */
   data: {
     height: 'auto',
-    markers: []
+    markers: [],
+    showLayer: true,
+    navList: [{
+      value: '交通',
+      id: '',
+      count: '20'
+    }, {
+      value: '教育',
+      id: '',
+      count: '20'
+    }, {
+      value: '医疗',
+      id: '',
+      count: '20'
+    }, {
+      value: '商业',
+      id: '',
+      count: '20'
+    }],
+    navIndex: 0,
+    list: [{
+      value: '示例数据名称',
+      id: '',
+      distance: '300'
+    }, {
+      value: '示例数据名称',
+      id: '',
+      distance: '300'
+    }, {
+      value: '示例数据名称',
+      id: '',
+      distance: '300'
+    }, {
+      value: '示例数据名称',
+      id: '',
+      distance: '300'
+    }, {
+      value: '示例数据名称',
+      id: '',
+      distance: '300'
+    }, {
+      value: '示例数据名称',
+      id: '',
+      distance: '300'
+    }, {
+      value: '示例数据名称',
+      id: '',
+      distance: '300'
+    }, {
+      value: '示例数据名称',
+      id: '',
+      distance: '300'
+    }, {
+      value: '示例数据名称',
+      id: '',
+      distance: '300'
+    }, {
+      value: '示例数据名称',
+      id: '',
+      distance: '300'
+    }, {
+      value: '示例数据名称',
+      id: '',
+      distance: '300'
+    }, {
+      value: '示例数据名称',
+      id: '',
+      distance: '300'
+    }, {
+      value: '示例数据名称',
+      id: '',
+      distance: '300'
+    }, {
+      value: '示例数据名称',
+      id: '',
+      distance: '300'
+    }, {
+      value: '示例数据名称',
+      id: '',
+      distance: '300'
+    }, {
+      value: '示例数据名称',
+      id: '',
+      distance: '300'
+    }, {
+      value: '示例数据名称',
+      id: '',
+      distance: '300'
+    }, {
+      value: '示例数据名称',
+      id: '',
+      distance: '300'
+    }, {
+      value: '示例数据名称',
+      id: '',
+      distance: '300'
+    }, {
+      value: '示例数据名称',
+      id: '',
+      distance: '300'
+    }, {
+      value: '示例数据名称',
+      id: '',
+      distance: '300'
+    }, {
+      value: '示例数据名称',
+      id: '',
+      distance: '300'
+    }, {
+      value: '示例数据名称',
+      id: '',
+      distance: '300'
+    }, {
+      value: '示例数据名称',
+      id: '',
+      distance: '300'
+    }, {
+      value: '示例数据名称',
+      id: '',
+      distance: '300'
+    }, {
+      value: '示例数据名称',
+      id: '',
+      distance: '300'
+    }, {
+      value: '示例数据名称',
+      id: '',
+      distance: '300'
+    }, {
+      value: '示例数据名称',
+      id: '',
+      distance: '300'
+    }, {
+      value: '示例数据名称',
+      id: '',
+      distance: '300'
+    }, {
+      value: '示例数据名称',
+      id: '',
+      distance: '300'
+    }, {
+      value: '示例数据名称',
+      id: '',
+      distance: '300'
+    }, {
+      value: '示例数据名称',
+      id: '',
+      distance: '300'
+    }, {
+      value: '示例数据名称',
+      id: '',
+      distance: '300'
+    }, {
+      value: '示例数据名称',
+      id: '',
+      distance: '300'
+    }, {
+      value: '示例数据名称',
+      id: '',
+      distance: '300'
+    }, {
+      value: '示例数据名称',
+      id: '',
+      distance: '300'
+    }, {
+      value: '示例数据名称',
+      id: '',
+      distance: '300'
+    }, {
+      value: '示例数据名称',
+      id: '',
+      distance: '300'
+    }, {
+      value: '示例数据名称',
+      id: '',
+      distance: '300'
+    }, {
+      value: '示例数据名称',
+      id: '',
+      distance: '300'
+    }]
   },
 
   /**
    * 生命周期函数--监听页面加载
    */
-  onLoad: function (options) {
+  onLoad: function(options) {
     qqmapsdk = new QQMapWX({
       key: 'KJCBZ-G2MKX-DB443-Z4CBR-7E6K2-GJF5D'
     });
@@ -25,7 +205,7 @@ Page({
 
     //调用wx.getSystemInfo接口，然后动态绑定组件高度
     wx.getSystemInfo({
-      success: function (res) {
+      success: function(res) {
         that.setData({
           height: res.windowHeight
         })
@@ -36,20 +216,19 @@ Page({
   /**
    * 生命周期函数--监听页面初次渲染完成
    */
-  onReady: function () {
-  },
+  onReady: function() {},
 
   /**
    * 生命周期函数--监听页面显示
    */
-  onShow: function () {
+  onShow: function() {
     const _this = this
     qqmapsdk.search({
-      keyword: '教育',  //搜索关键词
+      keyword: '教育', //搜索关键词
       page_size: 20,
-      location: '39.980014,116.313972',  //设置周边搜索中心点
+      location: '39.980014,116.313972', //设置周边搜索中心点
       filter: 'category=大学,中学,小学,幼儿园',
-      success: function (res) { //搜索成功后的回调
+      success: function(res) { //搜索成功后的回调
         console.log(res)
         var mks = []
         for (var i = 0; i < res.data.length; i++) {
@@ -58,7 +237,7 @@ Page({
             id: res.data[i].id,
             latitude: res.data[i].location.lat,
             longitude: res.data[i].location.lng,
-            iconPath: "/resources/my_marker.png", //图标路径
+            iconPath: "", //图标路径
             width: 20,
             height: 20
           })
@@ -67,10 +246,10 @@ Page({
           markers: mks
         })
       },
-      fail: function (res) {
+      fail: function(res) {
         console.log(res);
       },
-      complete: function (res) {
+      complete: function(res) {
         console.log(res);
       }
     });
@@ -79,35 +258,45 @@ Page({
   /**
    * 生命周期函数--监听页面隐藏
    */
-  onHide: function () {
+  onHide: function() {
 
   },
 
   /**
    * 生命周期函数--监听页面卸载
    */
-  onUnload: function () {
+  onUnload: function() {
 
   },
 
   /**
    * 页面相关事件处理函数--监听用户下拉动作
    */
-  onPullDownRefresh: function () {
+  onPullDownRefresh: function() {
 
   },
 
   /**
    * 页面上拉触底事件的处理函数
    */
-  onReachBottom: function () {
+  onReachBottom: function() {
 
   },
 
   /**
    * 用户点击右上角分享
    */
-  onShareAppMessage: function () {
+  onShareAppMessage: function() {
 
+  },
+  cutNav(e) {
+    this.setData({
+      navIndex: e.target.dataset.index
+    })
+  },
+  closeLayer(){
+    this.setData({
+      showLayer: false
+    })
   }
 })

pages/map/testmap.wxml

@@ -1 +1,56 @@
-<map id="map" markers="{{markers}}" longitude="116.313972" latitude="39.980014" scale="14" style="width: 100%; height: {{height}}px;"></map>
+<view class="container">
+  <view class="map">
+    <map bindtouchstart="closeLayer" id="map" markers="{{markers}}" longitude="116.313972" latitude="39.980014" scale="14" style="width: 100%; height: {{height}}px;"></map>
+  </view>
+  <cover-view class="layer flex-v {{showLayer ? 'active' : ''}}">
+    <cover-view class="nav">
+      <cover-view class="navItem">
+        <cover-view class="centerLabel">
+          <cover-image class="navImg" mode="widthFix" src="/assets/images/icon1.png"></cover-image>
+          <cover-view class="navText">首页</cover-view>
+        </cover-view>
+      </cover-view>
+      <cover-view class="navItem">
+        <cover-view class="centerLabel">
+          <cover-image class="navImg" mode="widthFix" src="/assets/images/icon1.png"></cover-image>
+          <cover-view class="navText">分享</cover-view>
+        </cover-view>
+      </cover-view>
+      <cover-view class="navItem">
+        <cover-view class="centerLabel">
+          <cover-image class="navImg" mode="widthFix" src="/assets/images/icon1.png"></cover-image>
+          <cover-view class="navText">南京</cover-view>
+        </cover-view>
+      </cover-view>
+    </cover-view>
+    <cover-view class="mainDetail flex-item">
+      <cover-view class="detail flex-v">
+        <cover-view class="top flex-h">
+          <cover-view class="flex-item">
+            <cover-view class="name">银城颐居悦见山</cover-view>
+            <cover-view class="remark">老山风景区</cover-view>
+            <cover-view class="remark">项目自带商业</cover-view>
+          </cover-view>
+          <cover-view class="btn">
+            <cover-view class="centerLabel">
+              <cover-image class="btnImg" mode="widthFix" src="/assets/images/icon1.png"></cover-image>
+              <cover-view class="text">导航</cover-view>
+            </cover-view>
+          </cover-view>
+        </cover-view>
+        <cover-view class="navList flex-h">
+          <cover-view wx:for="{{navList}}" wx:for-item="item" wx:for-index="index" wx:key="key" class="flex-item {{navIndex === index ? 'active' : ''}}" data-index="{{index}}" bindtap="cutNav">{{item.value}}（{{item.count || 0}}）</cover-view>
+        </cover-view>
+        <cover-view class="flex-item">
+          <cover-view class="list">
+            <cover-view class="listItem" wx:for="{{list}}" wx:for-item="item" wx:for-index="index" wx:key="key">
+              <cover-view class="line"></cover-view>
+              <cover-view class="icon"></cover-view>
+              <cover-view class="itemText">{{item.value}} 距您{{item.distance}}m</cover-view>
+            </cover-view>
+          </cover-view>
+        </cover-view>
+      </cover-view>
+    </cover-view>
+  </cover-view>
+</view>

pages/map/testmap.wxss

@@ -1 +1,200 @@
-/* pages/map/testmap.wxss */
+/* pages/map/testmap.wxss */
+
+.map {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  overflow: hidden;
+  z-index: 1;
+}
+
+.layer {
+  width: 100%;
+  height: 75vh;
+  position: absolute;
+  overflow: hidden;
+  bottom: 0;
+  transform: translateY(calc(75vh - 58px));
+  -webkit-transform: translateY(calc(75vh - 58px));
+  left: 0;
+  z-index: 2;
+  transition: all .3s linear;
+  -webkit-transition: all .3s linear;
+}
+
+.layer.active {
+  transform: translateY(0);
+  -webkit-transform: translateY(0);
+}
+
+.layer .nav{
+  white-space: nowrap;
+  position: relative;
+  overflow: hidden;
+}
+
+.layer .navItem {
+  width: 48px;
+  height: 48px;
+  display: inline-block;
+  vertical-align: middle;
+  position: relative;
+  overflow: hidden;
+  background: #fff;
+  border-radius: 10px;
+  /* box-shadow: 0 0 10px 5rpx rgba(0, 0, 0, .08); */
+  margin-left: 10px;
+}
+
+.layer .nav .centerLabel {
+  text-align: center;
+  width: 100%;
+}
+
+.layer .navImg  {
+  max-width: 16px;
+  max-height: 16px;
+  display: inline-block;
+}
+
+.layer .navText {
+  line-height: 16px;
+  font-size: 12px;
+  color: #666;
+  width: 100%;
+  display: block;
+  margin-top: -5rpx;
+}
+
+.layer .mainDetail {
+  margin-top: 10px;
+  position: relative;
+  overflow: hidden;
+}
+
+.layer .detail {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  overflow: hidden;
+  border-radius: 20px 20px 0 0;
+  background: #fff;
+  /* box-shadow: 0 0 10px 5px rgba(0, 0, 0, .08); */
+}
+
+.layer .detail .top {
+  padding: 0 20px;
+  position: relative;
+  overflow: hidden;
+  margin-top: 20px;
+  align-items: center;
+}
+
+.layer .detail .top .name {
+  font-size: 17px;
+  line-height: 30px;
+}
+
+.layer .detail .top .remark {
+  line-height: 17px;
+  font-size: 11px;
+  color: #666;
+}
+
+.layer .detail .top .btn {
+  width: 50px;
+  height: 50px;
+  position: relative;
+  overflow: hidden;
+  border-radius: 100%;
+  background: #bb9c79;
+  text-align: center;
+}
+
+.layer .detail .top .btn .centerLabel {
+  width: 100%;
+  overflow: hidden;
+}
+
+.layer .detail .btnImg {
+  width: 18px;
+  display: inline-block;
+}
+
+.layer .detail .top .btn .text {
+  width: 100%;
+  text-align: center;
+  color: #fff;
+  font-size: 13px;
+  line-height: 1.2;
+  margin-top: -8px;
+}
+
+.layer .navList {
+  border-top: 1px solid #eee;
+  border-bottom: 1px solid #eee;
+  margin-top: 15px;
+}
+
+.layer .navList .flex-item {
+  line-height: 22px;
+  font-size: 14px;
+  color: #333;
+  text-align: center;
+  padding: 12px 0;
+}
+
+.layer .navList .flex-item.active {
+  background: #bb9c79;
+  color: #fff;
+}
+
+.layer .detail .list {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  overflow-y: scroll;
+  -webkit-overflow-scrolling: touch;
+}
+
+.layer .detail .list .listItem {
+  padding: 0 0 0 35px;
+  position: relative;
+  overflow: hidden;
+}
+
+.layer .detail .list .line {
+  width: 1px;
+  height: 100%;
+  position: absolute;
+  left: 17px;
+  background: #f3ede1;
+  top: 0;
+  z-index: 1;
+}
+
+.layer .detail .list .listItem .itemText {
+  width: 100%;
+  position: relative;
+  overflow: hidden;
+  white-space: nowrap;
+  border-bottom: 1px solid #eee;
+  line-height: 22px;
+  font-size: 14px;
+  color: #333;
+  padding: 10px 0;
+}
+
+.layer .detail .list .listItem .icon {
+  width: 5px;
+  height: 5px;
+  position: absolute;
+  border-radius: 100%;
+  background: #f0cd7b;
+  border: 1px solid #ad8453;
+  z-index: 2;
+  left: 14px;
+  top: 50%;
+  transform: translateY(-50%);
+  -webkit-transform: translateY(-50%);
+}