• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

微信小程序仿摩拜单车

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

本小程序仿摩拜单车的地图显示和拖动部分,单车数据采用周边厕所模拟。index.wxml如下:

  1. <map id="map" bindcontroltap="bindcontroltap" bindregionchange="bindregionchange"

    longitude="{{jd}}" latitude="{{wd}}" markers="{{markers}}" controls="{{controls}}"

    style="width: 100%; height: {{height}}px;"  scale="16"   show-location>

  2. </map>

拖动地图,视野变化设置bindregionchange


页面加载时设置地图高度,control标注,头部广告及注册登录、返回当

前位置、优惠券、充值等。


  1. wx.getSystemInfo({

  2.      success: function (res) {

  3.        maph = res.windowHeight

  4.        mapw = res.windowWidth

  5.        that.setData({

  6.          height: maph,

  7.          controls: [

  8.            {

  9.              id: 1,

  10.              iconPath: '../libs/banner.jpg',

  11.              position: {

  12.                left: 10,

  13.                top: 10,

  14.                width: 390,

  15.                height: 80

  16.              },

  17.              clickable: true

  18.            },

  19.            {

  20.              id: 2,

  21.              iconPath: '../libs/gps.jpg',

  22.              position: {

  23.                left: 10,

  24.                top: maph - 50,

  25.                width: 40,

  26.                height: 40

  27.              },

  28.              clickable: true

  29.            },

  30.            {

  31.              id: 3,

  32.              iconPath: '../libs/log.jpg',

  33.              position: {

  34.                left: mapw / 2 - 80,

  35.                top: maph - 50,

  36.                width: 150,

  37.                height: 40

  38.              },

  39.              clickable: true

  40.            },

  41.            {

  42.              id: 4,

  43.              iconPath: '../libs/gift.jpg',

  44.              position: {

  45.                left: mapw - 60,

  46.                top: maph - 120,

  47.                width: 40,

  48.                height: 40

  49.              },

  50.              clickable: true

  51.            },

  52.            {

  53.              id: 5,

  54.              iconPath: '../libs/cost.jpg',

  55.              position: {

  56.                left: mapw - 60,

  57.                top: maph - 50,

  58.                width: 40,

  59.                height: 40

  60.              },

  61.              clickable: true

  62.            }

  63.          ]

  64.        })

由于需要频繁更新地图中心单车数据,对更新标记进行封装为getbike

  1. function getbike (){

  2.  console.log(mapcenter)

  3.  qqmapsdk.search({

  4.    location: {

  5.      latitude: mapcenter[0],


  6. 鲜花

    握手

    雷人

    路过

    鸡蛋
    该文章已有0人参与评论

    请发表评论

    全部评论

    专题导读
    上一篇:
    基于微信小程序的点餐系统发布时间:2022-07-18
    下一篇:
    微信小程序开发——表单组件发布时间:2022-07-18
    热门推荐
    阅读排行榜

    扫描微信二维码

    查看手机版网站

    随时了解更新最新资讯

    139-2527-9053

    在线客服(服务时间 9:00~18:00)

    在线QQ客服
    地址:深圳市南山区西丽大学城创智工业园
    电邮:jeky_zhao#qq.com
    移动电话:139-2527-9053

    Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap