index.js 5.57 KB
// pages/reservr/index.js
import util from '../../utils/util';
import App from '../../utils/api';
const {regeneratorRuntime} = global
import QQMapWX from '../../utils/qqmap-wx-jssdk'
Page({

  /**
   * 页面的初始数据
   */
  data: {
      map:{
          latitude: 23.099994,
          longitude: 113.324520,
          scale:18,
          height:300,
      },
      markers: [{
          iconPath: "/pages/image/ding.d.png",
          id: 0,
          latitude: 23.099994,
          longitude: 113.324520,
          width: 50,
          height: 50
      }],
      seller:{},
      polygons:{},
  },
  qqmapsdk:null,
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.qqmapsdk=new QQMapWX({
        key: 'SDEBZ-I74W4-QLGUX-XXYXU-HIR23-3QFBJ'
    });
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
      this.getPos();
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  },
  getPos(){
    this._getPos().then(res=>{
        console.log('wx.getLocation.then',res);
        let map=this.data.map;
        map.latitude=res.latitude;
        map.longitude=res.longitude;
        map.height=getApp().system.windowHeight
        this.setData({
            map:map,
        })
        //this.getMarkers();
        this.getMapPos();
    }).catch(()=>{
        this.selectComponent('#showModal').options({
            header:'定位失败',
            body:'需要地理位置授权'
        }).show();
    })
  },
    _getPos(){
      return new Promise((success,fail)=>{
          wx.getLocation({
              type:'gcj02',
              success:(res)=>{
                  success(res)
              },
              fail:(res)=>{
                  fail(res)
              },
              complete:(res)=>{
                  console.log('wx.getLocation',res)
              }
          });
      })
    },
    showModal(e){
        wx.openSetting()
    },
    regionchange(e){
        //console.log(e)
    },
    mapUpdated(e){
        //console.log('mapUpdated',e)
    },
    markertap(e){
        console.log(e)
        let seller_id=e.markerId;
        this.setData({
            seller:{
                id:seller_id,
                seller_name:'商户名名称'+seller_id,
                seller_addr:'商户地址'+seller_id,
                seller_phone:'商户电话'+seller_id,
            }
        })
        this.selectComponent('#seller-box').show();
        wx.hideTabBar();
    },
    getMarkers(pos){
        let map=this.data.map;
        let markers=[];
        let count=50;
        let x=(pos[1].latitude-pos[0].latitude)/count;
        let y=(pos[1].longitude-pos[0].longitude)/count;
        for(var i=1;i<count;i++){
            let v=parseInt(Math.random()*10)%2==0?-1:1;
            markers.push({
                id: i,
                iconPath: "/pages/image/ding.png",
                latitude: map.latitude+(x*i*v),
                longitude: map.longitude+(y*i*v),
                width: 24,
                height: 30,
                title:'店铺名称t'+i,
                // callout:{
                //     content:'店铺名称cc'+i,
                //     color:'#f00',
                //     fontSize:30,
                //     borderRadius:5,
                //     borderWidth:1,
                //     borderColor:'#f00',
                //     bgColor:'#fff',
                //     padding:5,
                //     display:'BYCLICK',//BYCLICK,ALWAYS
                //     textAlign:'center',
                // },
                label:{
                    content:'店铺名称lc'+i,
                    color:'#353535',
                    fontSize:13,
                    anchorX:-50,
                    anchorY:1,
                    borderWidth:1,
                    borderColor:'#B4B0B0',
                    borderRadius:20,
                    bgColor:'#fff',
                    padding:5,
                    textAlign:'center',
                },
            })
        }
        this.setData({
            markers:markers,
        })
    },
    //seller box 通知
    sellerBoxEvent(e){
        wx.showTabBar();
    },
    //根据中心点计算坐标范围
    getMapPos(){
        let map=this.data.map;
        let latitude=parseFloat(map.latitude);
        let longitude=parseFloat(map.longitude);
        let w2=getApp().system.windowWidth/2
        let h2=getApp().system.windowHeight/2
        let ys=w2*map.scale/1000000;
        let xs=h2*map.scale/1000000;
        let polygons=[
            {
            points:[
                {latitude: latitude-xs, longitude: longitude+ys},


                {latitude: latitude+xs, longitude: longitude+ys},
                {latitude: latitude-xs, longitude: longitude-ys},

                {latitude: latitude+xs, longitude: longitude-ys},

            ],
            strokeWidth:5,
            strokeColor:'#00000055',
            fillColor:'#00000088'
            }
        ];
        this.setData({
            polygons:polygons,
        })
        this.getMarkers([{latitude: latitude-xs, longitude: longitude-ys},{latitude: latitude+xs, longitude: longitude+ys}])
    },
})