微信小程序地图触摸拖动范围框示例代码

{"title":"微信小程序地图触摸拖动范围框示例代码","description":"本示例代码演示了如何在微信小程序中实现地图触摸拖动时带有拖动范围框的功能。通过计算触摸点的位移来确定范围框的位置和大小，并检查范围框是否超出地图边界。","keywords":"微信小程序, 地图, 触摸拖动, 范围框, 示例代码","content":""// index.js\nPage({\n data: {\n mapWidth: 0,\n mapHeight: 0,\n startX: 0,\n startY: 0,\n moveX: 0,\n moveY: 0,\n rangeLeft: 0,\n rangeTop: 0,\n rangeWidth: 0,\n rangeHeight: 0,\n rangeVisible: false\n },\n\n onLoad: function() {\n // 获取地图宽高\n const query = wx.createSelectorQuery()\n query.select('.map').boundingClientRect((res) => {\n this.setData({\n mapWidth: res.width,\n mapHeight: res.height\n })\n }).exec()\n },\n\n onTouchStart: function(e) {\n this.setData({\n startX: e.touches[0].clientX,\n startY: e.touches[0].clientY\n })\n },\n\n onTouchMove: function(e) {\n const moveX = e.touches[0].clientX - this.data.startX\n const moveY = e.touches[0].clientY - this.data.startY\n\n // 计算范围框的位置和大小\n const rangeLeft = Math.min(this.data.startX, this.data.startX + moveX)\n const rangeTop = Math.min(this.data.startY, this.data.startY + moveY)\n const rangeWidth = Math.abs(moveX)\n const rangeHeight = Math.abs(moveY)\n\n // 检查范围框是否超出地图边界\n if (rangeLeft < 0 || rangeTop < 0 || rangeLeft + rangeWidth > this.data.mapWidth || rangeTop + rangeHeight > this.data.mapHeight) {\n return\n }\n\n this.setData({\n moveX: moveX,\n moveY: moveY,\n rangeLeft: rangeLeft,\n rangeTop: rangeTop,\n rangeWidth: rangeWidth,\n rangeHeight: rangeHeight,\n rangeVisible: true\n })\n },\n\n onTouchEnd: function() {\n this.setData({\n startX: 0,\n startY: 0,\n moveX: 0,\n moveY: 0,\n rangeVisible: false\n })\n }\n})\n"\n"\n<view class="container"><view class="map" bindtouchstart="onTouchStart" bindtouchmove="onTouchMove" bindtouchend="onTouchEnd"><view class="range" hidden="{{!rangeVisible}}" style="left: {{rangeLeft}}px; top: {{rangeTop}}px; width: {{rangeWidth}}px; height: {{rangeHeight}}px;""\n"/* index.wxss */\n.container {\n display: flex;\n justify-content: center;\n align-items: center;\n width: 100%;\n height: 100%;\n}\n\n.map {\n position: relative;\n width: 300px;\n height: 300px;\n background-color: #ccc;\n}\n\n.range {\n position: absolute;\n border: 2px dashed #f00;\n pointer-events: none;\n}"\n"这个示例中，map代表地图容器，range代表拖动范围框。当在地图上触摸拖动时，通过计算触摸点的位移来确定范围框的位置和大小，并且检查范围框是否超出地图边界。拖动范围框的样式通过动态设置style属性来实现。"\n