微信小程序 - bindcontroltap和control的关系(map)
听说最近要废弃control，用cover-image和cover-view替代它，层级问题（我们此等萌新们还在想图标怎么显示在地图上（-.-））
粗略的来说，一个展示(control)，一个触发(bindcotroltap)
wxml
1 <view class="container">
2 <map id="map" latitude="{{latitude}}" longitude="{{longitude}}" scale="{{scale}}" bindregionchange="bindregionchange" marks="{{marks}}" controls="{{controls}}" bindcontroltap="bindcontroltap" show-location>
3 </map>
4 </view>
wxss
1 .container{
2 height: 100vh;
3 width: 100%;
4 }
5 map{
6 height: 100%;
7 width: 100%;
8 }
js
1 //index.js
2 //获取应用实例
3 var app = getApp()
4 Page({
5 data: {
6 latitude: 0.0,
7 longitude: 0.0,
8 scale: 15 //缩放级别
9 },
10
11
12 /**
13 * 监听markers移动事件
14 */
15 bindregionchange: function(e) {
16 if (e.type == "begin") {
17 console.log("begin");
18 } else if (e.type == "end") {
19 console.log("end");
20 }
21 },
22
23
24
25 /**
26 *
27 * 和controls绑定在一起
28 * id:1
29 * id:2
30 * id:3
31 * id:4
32 * id:5
33 * id:6
34 */
35
36 bindcontroltap: function(e) {
37 // 点击事件选项
38 switch (e.controlId) {
39 case 1:
40 {
41 console.log('触发第一事件！！！1');
42 // this.movetoPosition();
43 break;
44 }
45 case 2:
46 {
47 console.log('触发第二事件！！！2');
48 break;
49 }
50
51 case 3:
52 {
53 console.log('触发第三事件!！！3');
54 break;
55 }
56 case 4:
57 {
58 console.log('触发第四事件!！！4');
59 break;
60 }
61
62 case 5:
63 {
64 console.log('触发第五事件!！！5');
65 break;
66 }
67 }
68 },
69 /**
70 * 载入
71 */
72 onLoad() {
73 wx.getLocation({
74 type: 'gcj02',
75 success: (res) => {
76 console.log(res);
77 this.setData({
78 longitude: res.longitude,
79 latitude: res.latitude
80 })
81 }
82 }),
83 //通过获取系统宽高 - 可以获得更良好的图片定位
84 wx.getSystemInfo({
85 success: (res) => {
86 this.setData({
87 controls: [{
88 id: 1,
89 // 图片地址
90 iconPath: '/images/xx.png',
91 position: {
92 left: 20,
93 top: res.windowHeight - 80,
94 width: 50,
95 height: 50
96 },
97 clickable: true
98 },
99 {
100 id: 2,
101 // 图片地址
102 iconPath: '/images/x.png',
103 position: {
104 left: res.windowWidth / 2 - 45,
105 top: res.windowHeight - 100,
106 width: 90,
107 height: 90
108 },
109 clickable: true
110 },
111 {
112 id: 3,
113 // 图片地址
114 iconPath: '/images/xx.png',
115 position: {
116 left: res.windowWidth - 70,
117 top: res.windowHeight - 80,
118 width: 50,
119 height: 50
120 },
121 clickable: true
122 },
123 {
124 id: 4,
125 // 图片地址
126 iconPath: '/images/xxxx.png',
127 position: {
128 left: res.windowWidth / 2 - 11,
129 top: res.windowHeight / 2 - 45,
130 width: 22,
131 height: 45
132 },
133 clickable: true
134 },
135 {
136 id: 5,
137 // 图片地址
138 iconPath: '/images/xxxxx.png',
139 position: {
140 left: res.windowWidth - 68,
141 top: res.windowHeight - 155,
142 width: 45,
143 height: 45
144 },
145 clickable: true
146 }
147 ]
148 })
149 }
150 })
151 },
152 movetoPosition() {
153 this.mapCtx.moveToLocation();
154 },
155 onShow: function() {
156 this.mapCtx = wx.createMapContext("map");
157 this.movetoPosition();
158 }
159 })
