柿霖不是林 发表于 2017-2-24 17:49:25

微信小程序学习用demo：Truck：基于map组件的找车源








var utils = require('../../utils/util.js');
var that;
Page({

//*********相关数据**********//
data: {
    scale: 14,//当前缩放值
    city: '',//当前城市
    //屏幕的高度，默认的
    scheight: 667,
    //经度
    longitude: 110.35,
    //纬度
    latitude: 20.02,
    //根据当前位置获取的附件的货车列表
    markers: [],
    //车辆详情信息
    carDetal: {
      isShowDetail: false,
      title: '123'

    },
    cartype: 0,//当前车辆类型
    carlength: 0//当前的车辆长度

},

//*********页面相关回调函数**********//

//监听页面加载
onLoad: function () {
    that = this;
    refreshmaph();
    refreshLocation();
},

//视野发生变化时触发
regionchange(e) {
    console.log(e.type)
},

//点击了货车图标的回调函数
markertap(e) {
    console.log(e.markerId);
    this.setData({
      'carDetal.isShowDetail': true,
      'carDetal.title': e.markerId
    })
},

//控制器点击的回调函数
controltap(e) {
    console.log(e.controlId)
},

//*********自定义的相关监听事件**********//

//城市列表点击事件
searchCity: function () {
    console.log(this.data.city);
    if ('' === this.data.city) {
      wx.showToast({
      title: '好懒啊啊，什么都没输入!',
      // icon: 'success',
      duration: 2000
      })
    }
},

//进入列表
toCarList: function () {
    console.log('toCarList');
    var murl = "/pages/carlist/carlist?longitude=" + this.data.longitude
      + "&latitude=" + this.data.latitude;
    wx.navigateTo({
      url: murl
    });
},

//缩小地图
mapPlus: function () {
    var ss = this.data.scale;
    if (5 === ss) {
      return;
    }
    ss--;
    this.setData({
      scale: ss
    });
},

//放大地图
mapAdd: function () {
    console.log(this.data.markers.length);
    var ss = this.data.scale;
    if (18 === ss) {
      return;
    }
    ss++;
    this.setData({
      scale: ss
    });
},

//重新定位获取货车列表
refreshLocation: function () {
    wx.showToast({
      title: '加载中',
      icon: 'loading',
    })
    refreshLocation();
},

//关闭车辆详情信息
closeDetail: function () {
    this.setData({
      'carDetal.isShowDetail': false
    })
},
//选择车辆类型
selectCarType: function () {
    var murl = "/pages/cartype/cartype?comefrom=" + 1;
    wx.navigateTo({
      url: murl
    });
},
//选择车辆长度
selectCarLength: function () {
    var murl = "/pages/carlength/carlength";
    wx.navigateTo({
      url: murl
    });
},
//发布货源
releaseGoods: function () {
    var murl = "/pages/releasegoods/releasegoods";
    wx.navigateTo({
      url: murl
    });
}
})

/**
* 动态设置地图的高度
*/
function refreshmaph() {
wx.getSystemInfo({
    success: function (res) {
      that.setData({
      scheight: res.windowHeight,
      })
      console.log(res.windowWidth, );
    }
});
}

/**
* 刷新定位位置
*/
function refreshLocation() {
wx.getLocation({
    type: 'gcj02',
    success: function (res) {
      that.setData({
      longitude: res.longitude,
      latitude: res.latitude,
      });
      console.log(res.longitude + " " + res.latitude);
      //定位成功后重新获取附件的货车列表
      getNearCarByLocation();
    }
})
}

/**
* 根据定位点获取附近的车
*/
function getNearCarByLocation() {
that.setData({
    markers: [],
});
//模拟数据,货车数据
for (var i = 0; i < 5; i++) {
    var mark = {};
    mark.iconPath = "/resources/images/icon-truck.png";
    mark.id = i;
    mark.latitude = that.data.latitude + (Math.random() / 100);
    mark.longitude = that.data.longitude + (Math.random() / 100);
    mark.width = 30;
    mark.height = 30;
    that.data.markers.push(mark);
}

//我的位置
var me = {};
me.iconPath = "/resources/images/icon_location.png";
me.id = -100;
me.latitude = that.data.latitude;
me.longitude = that.data.longitude;
me.width = 30;
me.height = 30;
that.data.markers.push(me);

for (var j = 0; j < that.data.markers.length; j++) {
    console.log(that.data.markers);
}

console.log(that.data.latitude);
console.log('me');
that.setData({
    markers: that.data.markers,
});
}


**** Hidden Message *****

Ywenli 发表于 2017-8-18 15:06:33

感谢分享

jack56846 发表于 2020-4-20 11:16:50

我有流量，你有产品，我们就可以合作，有意的个人开发者朋友可以联系微,信,号j i m 2 0 1 8 0 6 8 8，详聊

jack56846 发表于 2020-4-20 11:17:13

我有流量，你有产品，我们就可以合作，有意的个人开发者朋友可以联系微,信,号j i m 2 0 1 8 0 6 8 8，详聊
页: [1]
查看完整版本: 微信小程序学习用demo：Truck：基于map组件的找车源