用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

搜索
  • TA的每日心情
    慵懒
    2017-1-6 10:46
  • 签到天数: 2 天

    [LV.1]初来乍到

    173

    主题

    181

    帖子

    981

    金钱

    咫尺尊享

    Rank: 5Rank: 5

    积分
    0
    2017-2-21 16:49:02 柿霖不是林 咫尺尊享 楼主 41724
    点评:这个demo主要针对map组件的使用;及tab页面切换的简单实现;






    [HTML] 纯文本查看 复制代码
    //index.js
    //获取应用实例
    var app = getApp()
    var sliderWidth = 96; // 需要设置slider的宽度,用于计算中间位置
    const system = app.getAppSysInfo()
    Page({
      data: {
        tabs: ["排队取号", "大额取现", "外币取现"],
        activeIndex: "0",
        sliderOffset: 0,
        sliderLeft: 0,
        mapheight: 0,
        cur_pos: [],
     
        markdata: [{
          "id": "8961722031359351008", "title": "北京瑞安宾馆(公安部招待所)洗手间", "address": "北京市东城区正义路7号(近最高人民法院)", "tel": " ", "category": "基础设施:公共设施:公共厕所", "type": 0, "location": { "lat": 39.90356, "lng": 116.40657 }, "_distance": 96.75, "pano": { "id": "100135JF140414134812200", "heading": null, "pitch": null, "zoom": null }, "ad_info": { "adcode": 110101, "province": "北京市", "city": "北京市", "district": "东城区" }
        }, {
          "id": "16577367284433806072", "title": "东交民巷饭店洗手间", "address": "北京市东城区东交民巷甲23号东交民巷饭店内", "tel": " ", "category": "基础设施:公共设施:公共厕所", "type": 0, "location": { "lat": 39.90291, "lng": 116.40788 }, "_distance": 128.55, "pano": { "id": "100130Y2131114112309770", "heading": null, "pitch": null, "zoom": null }, "ad_info": { "adcode": 110101, "province": "北京市", "city": "北京市", "district": "东城区" }
        }, { "id": "7750686651005167863", "title": "公共厕所", "address": "北京市东城区东华门街道正义路", "tel": " ", "category": "基础设施:公共设施:公共厕所", "type": 0, "location": { "lat": 39.90253, "lng": 116.40699 }, "_distance": 173.01, "pano": { "id": "10011007131115144138800", "heading": null, "pitch": null, "zoom": null }, "ad_info": { "adcode": 110101, "province": "北京市", "city": "北京市", "district": "东城区" } }, { "id": "4404794621616304401", "title": "首都大酒店-洗手间", "address": "北京市东城区前门东大街3号(正义路与前门东大街交汇处东侧)", "tel": " ", "category": "基础设施:公共设施:公共厕所", "type": 0, "location": { "lat": 39.9021, "lng": 116.40855 }, "_distance": 231.93, "pano": { "id": "10011007131118153857800", "heading": null, "pitch": null, "zoom": null }, "ad_info": { "adcode": 110101, "province": "北京市", "city": "北京市", "district": "东城区" } }, { "id": "2934085403390525891", "title": "公共厕所", "address": "北京市东城区前门东大街天安招待所旁", "tel": " ", "category": "基础设施:公共设施:公共厕所", "type": 0, "location": { "lat": 39.9007, "lng": 116.40798 }, "_distance": 372.77, "pano": { "id": "10011049131129105515300", "heading": null, "pitch": null, "zoom": null }, "ad_info": { "adcode": 110101, "province": "北京市", "city": "北京市", "district": "东城区" } }, { "id": "9119297836012965012", "title": "公共厕所", "address": "北京市东城区台基厂二条北京市总工会(北京市政府东)", "tel": " ", "category": "基础设施:公共设施:公共厕所", "type": 0, "location": { "lat": 39.90483, "lng": 116.41213 }, "_distance": 403.49, "pano": { "id": "10011029131209153040900", "heading": null, "pitch": null, "zoom": null }, "ad_info": { "adcode": 110101, "province": "北京市", "city": "北京市", "district": "东城区" } }, { "id": "16051029126406057607", "title": "公共厕所", "address": "北京市东城区前门东大街北京市公安局西南50米", "tel": " ", "category": "基础设施:公共设施:公共厕所", "type": 0, "location": { "lat": 39.90095, "lng": 116.40355 }, "_distance": 482.35, "pano": { "id": "10011013150323141947000", "heading": null, "pitch": null, "zoom": null }, "ad_info": { "adcode": 110101, "province": "北京市", "city": "北京市", "district": "东城区" } }, { "id": "2488251048649581703", "title": "公共厕所", "address": "北京市东城区北京市公安局东城分局前门派出所", "tel": " ", "category": "基础设施:公共设施:公共厕所", "type": 0, "location": { "lat": 39.89911, "lng": 116.40756 }, "_distance": 547.81, "pano": { "id": "10011029131204125334300", "heading": null, "pitch": null, "zoom": null }, "ad_info": { "adcode": 110101, "province": "北京市", "city": "北京市", "district": "东城区" } }, { "id": "9313861776896815428", "title": "公共厕所", "address": "北京市东城区西打磨厂街54号附近", "tel": " ", "category": "基础设施:公共设施:公共厕所", "type": 0, "location": { "lat": 39.89899, "lng": 116.40876 }, "_distance": 570.81, "pano": { "id": "10011029131204125410100", "heading": null, "pitch": null, "zoom": null }, "ad_info": { "adcode": 110101, "province": "北京市", "city": "北京市", "district": "东城区" } }, { "id": "3630939372408279488", "title": "公共厕所", "address": "北京市东城区草厂三条临汾会馆(利群烤鸭店北50米)", "tel": " ", "category": "基础设施:公共设施:公共厕所", "type": 0, "location": { "lat": 39.89898, "lng": 116.40633 }, "_distance": 571.47, "pano": { "id": "10011029131204125257700", "heading": null, "pitch": null, "zoom": null }, "ad_info": { "adcode": 110101, "province": "北京市", "city": "北京市", "district": "东城区" } }, { "id": "18410514417958946893", "title": "公共厕所", "address": "北京市东城区南河沿大街菖蒲河公园旁(北京饭店西)", "tel": " ", "category": "基础设施:公共设施:公共厕所", "type": 0, "location": { "lat": 39.90892, "lng": 116.40546 }, "_distance": 572.32, "ad_info": { "adcode": 110101, "province": "北京市", "city": "北京市", "district": "东城区" } }, { "id": "8239806190788015951", "title": "北京饭店-洗手间", "address": "北京市东城区东长安街33号", "tel": " ", "category": "基础设施:公共设施:公共厕所", "type": 0, "location": { "lat": 39.90896, "lng": 116.41032 }, "_distance": 598.22, "pano": { "id": "100139J1140402152925000", "heading": null, "pitch": null, "zoom": null }, "ad_info": { "adcode": 110101, "province": "北京市", "city": "北京市", "district": "东城区" } }, { "id": "14816864556594848198", "title": "公共厕所", "address": "北京市东城区南河沿大街105号旁", "tel": " ", "category": "基础设施:公共设施:公共厕所", "type": 0, "location": { "lat": 39.9094, "lng": 116.40662 }, "_distance": 602.91, "pano": { "id": "10011007131115144422600", "heading": null, "pitch": null, "zoom": null }, "ad_info": { "adcode": 110101, "province": "北京市", "city": "北京市", "district": "东城区" } }, { "id": "4438544471407674475", "title": "公共厕所(新活馆)", "address": "北京市东城区东打磨厂街7号新活馆B1层", "tel": " ", "category": "基础设施:公共设施:公共厕所", "type": 0, "location": { "lat": 39.90002, "lng": 116.41266 }, "_distance": 625.67, "pano": { "id": "10011029131205145622400", "heading": null, "pitch": null, "zoom": null }, "ad_info": { "adcode": 110101, "province": "北京市", "city": "北京市", "district": "东城区" } }, { "id": "6052309123093899454", "title": "女洗手间", "address": "北京市东城区霞公府街7号附近", "tel": " ", "category": "基础设施:公共设施:公共厕所", "type": 0, "location": { "lat": 39.90948, "lng": 116.40962 }, "_distance": 632.72, "pano": { "id": "10011007131204130553200", "heading": null, "pitch": null, "zoom": null }, "ad_info": { "adcode": 110101, "province": "北京市", "city": "北京市", "district": "东城区" } }, { "id": "5035338659938611468", "title": "公共厕所", "address": "北京市东城区西打磨厂街186号附近", "tel": " ", "category": "基础设施:公共设施:公共厕所", "type": 0, "location": { "lat": 39.89914, "lng": 116.40357 }, "_distance": 640.53, "pano": { "id": "10011029131204125124100", "heading": null, "pitch": null, "zoom": null }, "ad_info": { "adcode": 110101, "province": "北京市", "city": "北京市", "district": "东城区" } }, { "id": "11455346854485288610", "title": "北京天安瑞嘉酒店-洗手间", "address": "北京市东城区南河沿大街华龙街天安大厦(近天安门广场)", "tel": " ", "category": "基础设施:公共设施:公共厕所", "type": 0, "location": { "lat": 39.90979, "lng": 116.40697 }, "_distance": 642.98, "pano": { "id": "10011007131115144428200", "heading": null, "pitch": null, "zoom": null }, "ad_info": { "adcode": 110101, "province": "北京市", "city": "北京市", "district": "东城区" } }, { "id": "17321112338344582843", "title": "公共厕所", "address": "北京市东城区东长安街16号天安门广场东侧中国国家博物馆内", "tel": " ", "category": "基础设施:公共设施:公共厕所", "type": 0, "location": { "lat": 39.90626, "lng": 116.40052 }, "_distance": 647.62, "ad_info": { "adcode": 110101, "province": "北京市", "city": "北京市", "district": "东城区" } }, { "id": "3534111118132400138", "title": "男洗手间", "address": "北京市东城区王府井大街301号新燕莎金街购物广场F5", "tel": " ", "category": "基础设施:公共设施:公共厕所", "type": 0, "location": { "lat": 39.90938, "lng": 116.41051 }, "_distance": 647.96, "pano": { "id": "10011007131204130542400", "heading": null, "pitch": null, "zoom": null }, "ad_info": { "adcode": 110101, "province": "北京市", "city": "北京市", "district": "东城区" } }, { "id": "1665934838323831977", "title": "公共厕所", "address": "北京市东城区中国国家博物馆", "tel": " ", "category": "基础设施:公共设施:公共厕所", "type": 0, "location": { "lat": 39.90395, "lng": 116.3998 }, "_distance": 659.39, "pano": { "id": "10011007131118114918700", "heading": null, "pitch": null, "zoom": null }, "ad_info": { "adcode": 110101, "province": "北京市", "city": "北京市", "district": "东城区" } }],
     
        controls: [{
          id: 1,
          iconPath: '/resources/u11.png',
          position: {
            left: 10,
            top: system.windowHeight - 100,
            width: 20,
            height: 20
          },
          clickable: true
        }, {
          id: 2,
          iconPath: '/resources/my_hl.png',
          position: {
            left: system.windowWidth - 50,
            top: system.windowHeight - 100,
            width: 40,
            height: 20
          },
          clickable: false
        }]
      },
      controltap(e) {
        console.log("重新定位,id:" + e.controlId)
        this.onLoad()
        this.mapCtx.moveToLocation()
        // wx.getLocation({
        //   type: 'wgs84',
        //   success: (res) => {
        //     this.setData({
        //       cur_pos: [res.longitude, res.latitude]
        //     })
        //     console.log(res.longitude, res.latitude)
        //   }
        // })
      },
      regionchange(e) {
        console.log(e)
        //this.onLoad()
      },
      markertap(e) {
        console.log(e)
        let mark = {}
        this.data.markers.map((ele) => {
          if (ele.id == e.markerId)
            mark = ele
        })
        wx.navigateTo({
          url: '../logs/logs?lat=' + mark.latitude + '&lng=' + mark.longitude + '&address=' + mark.address + '&distance=' + mark._distance
        })
        return
        wx.showModal({
          title: '厕所地址',
          content: mark.address + ' (' + mark._distance.toFixed(0) + 'm)',
          showCancel: false,
          success: function (res) {
            if (res.confirm) {
              console.log('用户点击确定')
            }
          }
        })
      },
      onLoad() {
        console.log("load")
        this.setData({
          mapheight: system.windowHeight - 50,
          sliderLeft: (system.windowWidth / this.data.tabs.length - sliderWidth) / 2
        })
        wx.getLocation({
          type: 'wgs84',
          success: (res) => {
            this.setData({
              cur_pos: [res.longitude, res.latitude]
            })
            console.log(res.longitude, res.latitude)
            wx.request({
              url: 'https://api.getweapp.com/vendor/qqmap/search/toilet',
              data: {
                lat: res.latitude,
                lng: res.longitude,
                page: 1
              },
              success: (res) => {
                res.data.data.map((e) => {
                  e.iconPath = "/resources/location.png"
                  e.width = 20
                  e.height = 20
                  e.latitude = e.location.lat
                  e.longitude = e.location.lng
                })
                this.setData({
                  markers: res.data.data
                })
                console.log(res.data.data)
              }
            })
          }
        })
      },
      onReady: function (e) {
        // 使用 wx.createMapContext 获取 map 上下文 
        this.mapCtx = wx.createMapContext('myMap')
      },
      tabClick: function (e) {
        this.setData({
          sliderOffset: e.currentTarget.offsetLeft,
          activeIndex: e.currentTarget.id
        });
      }
    })





    游客,如果您要查看本帖隐藏内容请回复

    本帖子中包含更多资源

    您需要 登录 才可以下载或查看,没有帐号?立即注册

    x
    使用道具 举报 回复
    感谢分享
    使用道具 举报 回复
    感谢分享
    使用道具 举报 回复
    谢谢分享
    使用道具 举报 回复
    我有流量,你有产品,我们就可以合作,有意的个人开发者朋友可以联系微信号jim20180688,详聊
    发新帖
    您需要登录后才可以回帖 登录 | 立即注册
    咫尺论坛|小程序开发社区
    X

    扫码添加专属客服即可随时咨询

    还可领取小程序推广攻略