当鼠标在地图区域内进行按住左键选择操作时,可能会导致地图被选中而无法正常拖动的解决办法

  /* 当鼠标在地图区域内进行按住左键选择操作时,可能会导致地图被选中而无法正常拖动的解决方案 */
  .chooseMap {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }

// 我使用的是百度地图组件,基本都是一样,给地图box添加类名 chooseMap 即可

<baidu-map
      class="mapBox chooseMap"
      :center="mapCenter"
      :zoom="mapZoom"
      :scroll-wheel-zoom="true"
      @ready="onMapReady"
    >
    </baidu-map>

拓展:

上述CSS代码会禁止用户选中地图容器中的任何元素,包括地图本身,从而避免在拖动地图时出现选择效果。需要注意的是,该方案在不同浏览器中的兼容性可能存在差异,建议进行测试后再进行实际应用。

另外,如果希望用户进行地图缩放和平移等交互操作时依然能够选中地图元素,可以在进行缩放和平移等操作前暂时将user-select属性设置为默认值,操作完成后再修改回原来的值。例如:

// 获取地图容器元素
var mapContainer = document.getElementById("map");

// 在开始缩放或平移操作前,临时将user-select属性设置为默认值
// 操作完成后再将其修改回none
function beforeZoomOrPan() {
    mapContainer.style.userSelect = "auto";
}

function afterZoomOrPan() {
    mapContainer.style.userSelect = "none";
}


上述代码中,beforeZoomOrPan函数在进行地图缩放或平移操作前被调用,临时将user-select属性设置为默认值。操作完成后,afterZoomOrPan函数再将其修改回原来的值。这样可以避免在进行缩放和平移等操作时出现选择效果,同时又不会影响用户选中地图元素的能力。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值