高德地图鼠标工具拉框缩放调用函数mouseTool.close(true)后地图无法平移

本文链接：https://blog.csdn.net/weixin_40691291/article/details/115937129

本文介绍了解决高德地图中使用鼠标工具进行框选缩放后地图无法平移的问题。通过调整代码，在关闭鼠标工具后重新启用地图平移功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题记录：高德地图鼠标工具拉框缩放调用函数mouseTool.close(true)后地图无法平移，更改前代码如下

    switch (key) {
        case '1': { // 地图框选放大
          this.mouseTool.rectZoomIn({
            strokeColor: '#80d8ff',
            fillColor: '#80d8ff',
            fillOpacity: 0.3
          })
          break
        }
        case '2': { // 地图框选缩小
          this.mouseTool.rectZoomOut({
            strokeColor: '#80d8ff',
            fillColor: '#80d8ff',
            fillOpacity: 0.3
          })
          break
        }
        case '3': { // 平移
          this.mouseTool.close(true)// 关闭，并清除覆盖物
          break
        }
      }

问题解决步骤：

一、通过官网手册查看当前dragEnable 的状态https://lbs.amap.com/api/javascript-api/reference/map

二、默认情况下dragEnable为true

三、切换为缩放功能后再调用mouseTool.close(true)函数，控制台的输出结果变成了false

四、发现了原因问题就好解决了，只需要添加如下代码就重新启用鼠标平移功能就可以了

//通过map.setStatus方法动态设置地图状态
map.setStatus({
   dragEnable: true
});

完整代码

/** 辅助工具选择 */
    handleSelect(key) {
      switch (key) {
        case '1': { // 地图框选放大
          this.mouseTool.rectZoomIn({
            strokeColor: '#80d8ff',
            fillColor: '#80d8ff',
            fillOpacity: 0.3
          })
          break
        }
        case '2': { // 地图框选缩小
          this.mouseTool.rectZoomOut({
            strokeColor: '#80d8ff',
            fillColor: '#80d8ff',
            fillOpacity: 0.3
          })
          break
        }
        case '3': { // 平移
          this.clean()
          break
        }
        case '4': { // 地图还原
          this.map.setZoom(14) // 设置地图层级
          this.map.setCenter([117.9964, 24.5340]) // 设置地图中心点
          this.clean()
          break
        }
        case '5': { // 测距
          this.mouseTool.rule({
            startMarkerOptions: {// 可缺省
              icon: new this.AMap.Icon({
                size: new this.AMap.Size(19, 31), // 图标大小
                imageSize: new this.AMap.Size(19, 31),
                image: 'https://webapi.amap.com/theme/v1.3/markers/b/start.png'
              })
            },
            endMarkerOptions: {// 可缺省
              icon: new this.AMap.Icon({
                size: new this.AMap.Size(19, 31), // 图标大小
                imageSize: new this.AMap.Size(19, 31),
                image: 'https://webapi.amap.com/theme/v1.3/markers/b/end.png'
              }),
              offset: new this.AMap.Pixel(-9, -31)
            },
            midMarkerOptions: {// 可缺省
              icon: new this.AMap.Icon({
                size: new this.AMap.Size(19, 31), // 图标大小
                imageSize: new this.AMap.Size(19, 31),
                image: 'https://webapi.amap.com/theme/v1.3/markers/b/mid.png'
              }),
              offset: new this.AMap.Pixel(-9, -31)
            },
            lineOptions: {// 可缺省
              strokeStyle: 'solid',
              strokeColor: '#FF33FF',
              strokeOpacity: 1,
              strokeWeight: 2
            }
            // 同 RangingTool 的 自定义 设置，缺省为默认样式
          })
          break
        }
        case '6': { // 测面
          this.mouseTool.measureArea({
            strokeColor: '#80d8ff',
            fillColor: '#80d8ff',
            fillOpacity: 0.3
            // 同 Polygon 的 Option 设置
          })
          break
        }
        case '7': { // 清除所有操作
          this.clean()
          break
        }
      }
    },
    /** 清除 */
    clean() {
      this.mouseTool.close(true)// 关闭，并清除覆盖物
      this.map.setStatus({ dragEnable: true })// 开启鼠标平移功能
    },