/* 当鼠标在地图区域内进行按住左键选择操作时,可能会导致地图被选中而无法正常拖动的解决方案 */
.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函数再将其修改回原来的值。这样可以避免在进行缩放和平移等操作时出现选择效果,同时又不会影响用户选中地图元素的能力。