如何实现自适应大小图标
最近选了个小课设，要求实现小程序找附近停车位的功能，如下图所示。
每个车位都是一个marker，红色marker代表该车位已被占用，绿色marker代表还没被占用。
但是这样的图标有个问题，那就是宽度和高度都是固定死的，当地图缩放到一定程度，图标会堆积在一起，很影响观感：
故我开始在网上找自适应icon的方法，但没怎么找到教程，遂打算根据自己的思路写篇教程，希望对后来者有所帮助。(代码放在教程末尾)
提示：以下是本篇文章正文内容，下面案例可供参考
1、自适应图标icon/marker的原理是什么？
我最初的思路是：用户每次缩放地图的时候，都会触发后台一个函数scaleChange(),该函数能调用微信小程序提供的API(MapContext.getScale())来获取当前地图的缩放程度scale。
(虽然我后面发现不需要用到 MapContext.getScale() 就可以直接获取到scale )
我们拿到这个scale后，根据scale数值大小，对marker里icon图标的width和height数值进行修改，从而达到“自适应”的效果。比如scale数值变小（即缩小地图），那么图标的高度和宽度就要跟着变小。那么具体是怎么实现的呢？
2、实现过程
2.1、如何监听用户是否有缩放页面
首先，微信小程序的map组件，即地图在进行缩放的时候，会触发一个事件：
该事件使用方法如下：
我们首先要在wxml里的map组件里加上属性 bindregionchange，并且绑定后台的 scaleChange() 函数，这样当用户对地图进行拖拽或缩放时，就会触发==scaleChange()==函数。
//.wxml页面
<map id="map" style="width:100vw; height:100vh"
bindregionchange="scaleChange">
</map>
然后我们在js页面添加以下函数：
//.js页面添加函数
scaleChange(e) {
console.log(e)
}
接着我们用鼠标拖动或缩放地图，移动视野，就可以看到控制台输出两行信息：
(电脑端的微信小程序有些问题，缩放可能没法第一时间显示信息，还需要移动一下视野才能显示end信息)
begin代表视野变化前，即用户拖拽或缩放屏幕前的时候
end代表视野变化后，即用户拖拽或缩放屏幕后的时候
在本篇教程中，我们只需要用到end信息。
故我们将代码修改为：
scaleChange(e) {
if (e.type == 'end') {
// 这个事件的type有'begin'和'end'2种类型，，我们滑动一下地图，会有2次响应。但我们只关注'end'！！！
console.log(e)
}
}
即可看到end的具体信息
causedBy表示用户执行的行为，比如移动地图为“drag”，如果是缩放地图则为“scale”。这里我是移动地图后产生的信息，故显示为drag。
detail.scale是我们需要用到的数据，因为这代表的就是当前的地图缩放程度scale。
至此，我们已经做到了如何实时监听用户是否缩放屏幕，以及获取地图的缩放程度scale数值。
2.2、如何根据scale来修改图标的宽和高
有了缩放程度scale的数值后，如何根据该数值自适应修改icon的宽度和高度呢？
以下是实现代码，我们对代码拆分讲解：
//scaleChange() 总代码
scaleChange(e) {
var that = this//后面用到的this是在闭包里的，而不是指当前页面，故要先保存为that，方便下面使用
if (e.type == 'end') {
console.log(e)
if(e.causedBy == "scale") //如果用户执行的是缩放操作
{
//或者用e.detail.scale != this.data.scale也可以
let newwidth = parseInt(3.33*e.detail.scale - 36.6)
let newheight = newwidth //建立映射关系，得到新的宽度和高度
//遍历markers数组，批量修改数组里的宽度和高度
this.data.markers.forEach(function(item, index) {
that.setData({
[`markers[${
index}].width`]: newwidth,
[`markers[${
index}].height`]: newheight,
})
})
}
}
}
我的代码思路是：先利用if条件判定当前用户是否执行“scale“缩放操作
if(e.causedBy == "scale") 或者 if(e.detail.scale != this.data.scale)
注意：我在电脑端用if(e.causedBy == “scale”)的时候遇到了个小问题，哪怕用户缩放了屏幕也无法进入if条件，所以我最后用的是if(e.detail.scale != this.data.scale)，即每当当前的scale值与data存储的scale值不一样时，就判断用户进行了缩放地图操作。
当用户执行了缩放操作后，我们就对以下 markers 数组的width和height进行批量修改宽度和高度
修改markers数组的高度和宽度很简单，直接用forEach函数进行遍历修改就好了。
注：这里不可以用this.setData,因为这里面的this非页面的this，所以需要先用变量保存为that。
var that = this
this.data.markers.forEach(function(item, index) {
that.setData({
[`markers[${
index}].width`]: newwidth,
[`markers[${
index}].height`]: newheight,
})
})
但是到了这一步我们还不知道修改成什么数值(新的宽度newwidth和新的高度newheight)观感好，故下一步就是要建立映射关系。
因为地图缩放越小，图标则要越小，可以将scale和width当作线性关系。故我们建立一个映射关系：y=kx+b，
其中，y为宽度或高度，x为scale数值。
我经过实际测量，发现当缩放程度scale =20时，图片的width=height=30较合适，当缩放程度为scale = 17时，图片的width = height = 20较合适。
其实就相当于给你两个点(x=20,y=30),(x=17,y=20) ，求解方程。
得到y=3.33b-36.6
let newwidth = parseInt(3.33*this.data.scale - 36.6)
let newheight = newwidth
这里要用parseInt将结果强制转换为整数的原因是：width和height只能接受整数类型，不接受浮点数类型，故要进行强制转换。
到了这里，我们的映射关系就算是建立起来了，当scale越小，我们的width和height也会跟着变小。这样就达到了自适应的效果。
当然到了这一步还没有结束，我们观察这个式子 y=3.33b-36.6 可以发现，当b=10.99即scale=10.99的时候，y=0。而我们知道icon图标的宽度和高度是不可以为负数或零的，所以我们要在map组件里再添加一个缩放限制属性min-scale，来防止缩放到一定程度，宽度高度变为负数：
<map id="map" style="width:100vw; height:100vh"
min-scale="10.99"
bindregionchange="scaleChange">
</map>
当然你也可以根据你的机型和实际情况作自己的调整，这一部分计算不需要十分精确。
至此，我们就实现了自适应icon图标的方法
3、完整源码
//.wxml页面
<map id="map" style="width:100vw; height:100vh"
markers="{
{markers}}" latitude="{
{latitude}}"
longitude="{
{longitude}}" scale="{
{scale}}" min-scale="10.5"
show-location="true" bindmarkertap="handleMarkerTap" bindregionchange="scaleChange">
</map>
//.js页面
scaleChange(e) {
var that = this
if (e.type == 'end') {
console.log(e)
if(e.detail.scale != this.data.scale)
{
let newwidth = parseInt(3.33*this.data.scale - 36.6)
let newheight = newwidth
this.data.markers.forEach(function(item, index) {
that.setData({
[`markers[${
index}].width`]: newwidth,
[`markers[${
index}].height`]: newheight,
})
})
}
}
},