地图优化

wangfan
1 parent dcb27e51
Showing 2 changed files with 92 additions and 69 deletions
pages/reserve/index.js
pages/reserve/index.wxml
--- a/pages/reserve/index.js
View file @577234d
+++ b/pages/reserve/index.js
View file @577234d
@@ -4,7 +4,7 @@ import util from '../../utils/util';
 import App from '../../utils/api';
 import DA from './data';
 const {regeneratorRuntime} = global
-const mapScale=18;
+const mapScale=16//18;
 const transverseViewHeight=172;
 const renNum=function(){
   let arr=[]
@@ -40,6 +40,7 @@ Page({
   //qqmapsdk:null,
   sellers: [],
   sellersIds:[],
+  sellersNow:[],//本次视图内商户
   searchAddrTop:50,
   user:{
     latitude: 23.099994,
@@ -253,11 +254,12 @@ Page({
       },
     })
   },
+  hasMarkertap:false,
   markertap(e,flag=true){
+    this.hasMarkertap=false
     let markers=this.data.markers;
-    console.log(e)
+    console.log('markertap',e)
     let bl=1.2;
-    let current=0;
     markers.forEach((m,i)=>{
       m.iconPath=m.iconPath.replace('/cates-active/','/cates/')
       m.zIndex=m.zIndexBak
@@ -274,7 +276,6 @@ Page({
         m.callout.bgColor= '#626262';
       }
       if(m.id==e.markerId){
-        current=i;
         m.iconPath=m.iconPath.replace('/cates/','/cates-active/')
         if(m.width==20){
           m.width=20*bl;
@@ -294,8 +295,17 @@ Page({
       markers:markers,
     };
     if(flag){
+      let current=0;
       //obj.scrollIntoView='seller-'+e.markerId;
-      obj.current=current
+      this.sellers.forEach(se=>{
+        if(se.id==e.markerId){
+          obj.current=current;
+          return true;
+        }else if(se.display!='none'){
+          current++;
+        }
+      })
+      this.hasMarkertap=true;
     }
     this.setData(obj)
   },
@@ -336,7 +346,7 @@ Page({
       },300)
     }
     let markers = [];
-    let sellers=[];
+    let sellers=this.data.sellers;
     let param={
       lat: this.user.latitude,
       lng: this.user.longitude,
@@ -351,79 +361,88 @@ Page({
     if(this.data.multiIndex[1]>0){
       param.cuisine=await DA.getCatesID(this.data.multiIndex[1]-1);
     }
+    let now_sid=[];
     App.Customer.SellerList(param).then(res => {
       this.mapData.region.southwest.latitude='';
       if (res.ret == 200) {
-        // let sellersIds=["scale"+this.mapData.scale];
-        // res.data.forEach(seller=>{
-        //   sellersIds.push(seller.id);
-        // })
-        // if(sellersIds.toString()==this.sellersIds.toString()) {
-        //   return;
-        // }
-        // this.sellersIds=sellersIds;
-        sellers=res.data;
-        let sellersLength=sellers.length;
-        sellers.forEach((seller,si) => {
-          seller.distance=parseInt(seller.distance);
-          if(seller.distance>1000){
-            seller.distance=(seller.distance/1000).toFixed(2)+'公里'
-          }else{
-            seller.distance+='米';
+        let sellersList=res.data;
+        let sellersLength=sellersList.length;
+        sellersList.forEach((seller,si) => {
+          now_sid.push(seller.id);
+          let hasMark=false;
+          if(this.sellersIds._indexOf(seller.id)<0){
+            seller.distance=parseInt(seller.distance);
+            if(seller.distance>1000){
+              seller.distance=(seller.distance/1000).toFixed(2)+'公里'
+            }else{
+              seller.distance+='米';
+            }
+            this.sellersIds.push(seller.id);
+            hasMark=true;
+            sellers.push(seller);
           }
-
-          let namelength = seller.sellername.replace(/[^\x00-\xff]/g, "01").length + 8;
-          let marker={
-            id: seller.id,
-            iconPath: "http://qn.colorcun.com/custom/lite-online/cates/circle1x5.png"+cates_version,
-            latitude: seller.lat,
-            longitude: seller.long,
-            width: 8,
-            height: 8,
-            //title:seller.seller_name,
-            zIndex:sellersLength-si,
-            zIndexBak:sellersLength-si,
-          };
-          if(seller.mode.length>0){
-            seller.mode.forEach(x=>{
-              if(x.id==1){//大图标
-                marker.iconPath="http://qn.colorcun.com/custom/lite-online/cates/其他菜品.png";
-                if(seller.cate.length>0){
-                  marker.iconPath=seller.cate[0].icon
+          if(hasMark){
+            let marker={
+              id: seller.id,
+              iconPath: "http://qn.colorcun.com/custom/lite-online/cates/circle1x5.png"+cates_version,
+              latitude: seller.lat,
+              longitude: seller.long,
+              width: 8,
+              height: 8,
+              //title:seller.seller_name,
+              zIndex:sellersLength-si,
+              zIndexBak:sellersLength-si,
+            };
+            if(seller.mode.length>0){
+              seller.mode.forEach(x=>{
+                if(x.id==1){//大图标
+                  marker.iconPath="http://qn.colorcun.com/custom/lite-online/cates/其他菜品.png";
+                  if(seller.cate.length>0){
+                    marker.iconPath=seller.cate[0].icon
+                  }
+                  marker.iconPath=marker.iconPath.replace(/\/cates\/(.*)\.png/,function ($0,$1) {
+                    return '/cates/'+encodeURI($1)+'.png'
+                  })
+                  marker.iconPath+=cates_version
+                  marker.width=20;
+                  marker.height=25;
+                }
+                if(x.id==2){//商家名
+                  marker.callout={
+                    content: '　' + seller.sellername + '　',
+                    color: '#fefefe',
+                    fontSize: 12,
+                    borderWidth: 0,
+                    borderColor: '#626262',
+                    borderRadius: 50,
+                    bgColor: '#626262',
+                    padding: 5,
+                    textAlign: 'left',
+                    display:'ALWAYS',
+                  };
                 }
-                marker.iconPath=marker.iconPath.replace(/\/cates\/(.*)\.png/,function ($0,$1) {
-                  return '/cates/'+encodeURI($1)+'.png'
-                })
-                marker.iconPath+=cates_version
-                marker.width=20;
-                marker.height=25;
-              }
-              if(x.id==2){//商家名
-                marker.callout={
-                  content: '　' + seller.sellername + '　',
-                  color: '#fefefe',
-                  fontSize: 12,
-                  borderWidth: 0,
-                  borderColor: '#626262',
-                  borderRadius: 50,
-                  bgColor: '#626262',
-                  padding: 5,
-                  textAlign: 'left',
-                  display:'ALWAYS',
-                };
-              }
-            })
+              })
+            }
+            markers.push(marker)
           }
-          markers.push(marker)
         })
       } else {
         console.log('接口报错了');
       }
+      this.sellersNow=now_sid;
+      sellers.forEach(se=>{
+        se.display='none'
+        if(now_sid._indexOf(se.id)>-1){
+          se.display='';
+        }
+      })
       this.sellers = sellers;
       let obj={
-        markers: markers,
         sellers:sellers,
       }
+      if(markers.length>0){
+        obj.markers=this.data.markers.concat(markers);
+      }
       if(sellers.length<this.data.current){
         obj.current=0
       }
@@ -489,11 +508,15 @@ Page({
     },300)
   },
   bindtransition(e){
-    console.log(e.detail.current);
+    console.log('bindtransition',this.sellersNow,e.detail.current,this.sellersNow[e.detail.current]);
+    if(this.hasMarkertap){
+      this.hasMarkertap=false;
+      return;
+    }
     let i=e.detail.current
-    this.activeSellerID=this.sellers[i];
+    this.activeSellerID=this.sellersNow[i];
     this.markertap({
-      markerId:this.sellers[i].id
+      markerId:this.activeSellerID
     },false)
   },
   gotoDetail(e){
--- a/pages/reserve/index.wxml
View file @577234d
+++ b/pages/reserve/index.wxml
View file @577234d
@@ -51,7 +51,7 @@
                     previous-margin="{{20}}px" next-margin="{{20}}px"
                     current="{{current}}" bindchange="bindtransition">
                 <block wx:for="{{sellers}}" wx:key="sellers.key">
-                    <swiper-item bindtap="gotoDetail" data-sid="{{item.id}}">
+                    <swiper-item bindtap="gotoDetail" data-sid="{{item.id}}" wx:if="{{item.display!='none'}}">
                         <view class="seller" id="seller-{{item.id}}">
                             <sb-tr seller="{{item}}" hasActivity="{{true}}"></sb-tr>
                         </view>