微信小程序开源地图组件leafletwx功能更新_微信小程序 leafletwx-CSDN博客

本文链接：https://blog.csdn.net/whbke/article/details/132223135

leafletwx是基于leaflet，使用微信原生组件开发的一套开源地图组件，可以用于替代小程序的原生map组件，支持百度、高德、天地图等各类瓦片地图服务，项目开源地址：leafletwx

修复BUG：

1.在IOS下polygon崩溃问题

插件说明：

1.插件目录位于components/zhgeo/plugins目录
2."canvas.stepjs”，导入该插件后，polygon/polyline等canvas元素会采用局部加载
3."zoomanimate.js”，导入该插件后，启用动画缩放功能，包括左下角缩放按钮缩放、地图双击缩放，手指捏合缩放。建议导入canvas.step插件否则canvas组件内的元素会有位置闪动

增加功能：

增加功能:
1.新增polygon、polyline等canvas元素的点击事件
示例参见qqmap页面

// 添加区域, 并监听点击事件
      let y = L.polygon([[31.2930516,120.625814], [31.2940516,120.625214], [31.2940516,120.626114]], {color: '#ff0000', weight: 4}).addTo(map)
        .on({
          click: (e) => {
            console.log(e)
          }
        });

2增加ImageOverlay
示例参见qqmap页面

var corner1 = L.latLng(31.294945,120.625059),
      corner2 = L.latLng(31.294726,120.625576),
      bounds = L.latLngBounds(corner1, corner2);
      var url = 'https://hbimg.huaban.com/c939311c7b988a0d77fa7260248a383416ef488d36dd1-G5tt78_fw236';
      var image = L.imageOverlay(url, bounds,{interactive:true}).addTo(map)
        .on({
          click: (e) => {
            console.log(e)
          }
        });

3.地图左下角的缩放按钮增加缩放极限提醒
效果参考下图