微信小程序仿摩拜单车

本小程序仿摩拜单车的地图显示和拖动部分，单车数据采用周边厕所模拟。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

6.        that.setData({

7.          height: maph,

8.          controls: [

9.            {

10.              id: 1,

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

12.              position: {

13.                left: 10,

14.                top: 10,

15.                width: 390,

16.                height: 80

17.              },

18.              clickable: true

19.            },

20.            {

21.              id: 2,

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

23.              position: {

24.                left: 10,

25.                top: maph - 50,

26.                width: 40,

27.                height: 40

28.              },

29.              clickable: true

30.            },

31.            {

32.              id: 3,

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

34.              position: {

35.                left: mapw / 2 - 80,

36.                top: maph - 50,

37.                width: 150,

38.                height: 40

39.              },

40.              clickable: true

41.            },

42.            {

43.              id: 4,

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

45.              position: {

46.                left: mapw - 60,

47.                top: maph - 120,

48.                width: 40,

49.                height: 40

50.              },

51.              clickable: true

52.            },

54.            {

55.              id: 5,

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

57.              position: {

58.                left: mapw - 60,

59.                top: maph - 50,

60.                width: 40,

61.                height: 40

62.              },

63.              clickable: true

64.            }

69.          ]

70.        })

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

1. function getbike (){

2.  console.log(mapcenter)

4.  qqmapsdk.search({

5.    location: {

6.      latitude: mapcenter[0],

7.      longitude: mapcenter[1]

8.    },

9.    keyword: '厕所',

10.    success: function (res) {

12.      var mark = []      

13.      var getdata = res.data

14.      for (var i = 0; i < getdata.length; i++) {

16.        mark[i] = {

17.          iconPath: "../libs/mobi.jpg",

18.          id: i,

19.          latitude: getdata[i].location.lat,

20.          longitude: getdata[i].location.lng

21.        }

22.        mark.push({

23.          iconPath: "../libs/c.png",

24.          id: 99,

25.          latitude: mapcenter[0],

26.          longitude: mapcenter[1]

29.        })

31.      }

32.      that.setData({

33.        markers: mark

34.      })

38.    }

39.  });

41. }

页面初次加载，获取当前gps位置周围的单车数据

1. onReady: function () {

2.    var _this=this

3.    wx.getLocation({

4.      type: 'gcj02',

5.      success: function (res) {

7.        latitude1 = res.latitude

8.        longitude1 = res.longitude

9.        mapcenter = [latitude1, longitude1]

10.        getbike()

14.            _this.setData({

15.              wd: latitude1,

16.              jd: longitude1,

19.            })

23.        }

24.    })

25.  },

26. 
    

拖动地图时，先获取地图中心坐标，然后再调用getbike。

1. //获取中心点

2.  bindregionchange: function (e) {

4.    this.mapCtx.getCenterLocation({

5.      success: function (res) {

6.        mapcenter = [res.latitude, res.longitude]

8.      }

9.    })

13.    console.log(mapcenter)

14.         getbike()

16.  }

    ,

点击控件，根据控件id不同进行处理

1. //控件

3.  bindcontroltap: function (e){

4. console.log(e.controlId)

5.   var id=e.controlId

6.   if (id==2){

7.     this.mapCtx.moveToLocation()

8.     mapcenter = [latitude1, longitude1]

9.     getbike()

11.   }

12.   else if(id==1){

13.     wx.navigateTo({

14.       url: '../free30/free30'

15.     })

16.   }

17.   else if (id==3) {

18.     wx.navigateTo({

19.       url: '../log/log'

20.     })

21.   }

22.  }

24. })

    
    

效果图如下：