在用高德地图开发的时候，鼠标放在点位下面的字上再拖拽屏幕会导致页面上的其他部分被选择

Question

在用高德地图开发的时候，鼠标放在点位下面的字上再拖拽屏幕会导致页面上的其他部分被选择，这个是什么原因，怎么解决

Answer 1

上午好☀️☀️☀️️
本答案参考通义千问

这个问题通常发生在高德地图的标记（Marker）或信息窗体（InfoWindow）中包含可选文本时。当用户尝试在地图上拖动时，浏览器会误认为用户正在选择文本，从而导致页面上的其他部分被选择。为了解决这个问题，我们需要阻止这种默认行为。

以下是几种可能的解决方案：

1. 使用CSS来禁止文本选择：

   • 这种方法适用于整个页面，但如果你只想针对特定元素，可以结合JavaScript来实现。

   * {
       user-select: none; /* 标准语法 */
       -webkit-user-select: none; /* Safari */
       -moz-user-select: none; /* Firefox */
       -ms-user-select: none; /* IE 10+ */
   }
   

2. 通过JavaScript监听事件并阻止默认行为：

   • 我们可以在标记或信息窗体的容器上添加事件监听器，并阻止这些事件的默认行为。

   // 假设这是你的地图实例
   var map = new AMap.Map('container', {
       zoom: 10,
       center: [116.39,39.9]
   });
   
   // 创建一个标记
   var marker = new AMap.Marker({
       position: new AMap.LngLat(116.39, 39.9),
       title: '北京'
   });
   
   // 将标记添加到地图
   map.add(marker);
   
   // 监听鼠标按下事件
   marker.on('mousedown', function(e) {
       e.preventDefault(); // 阻止默认行为
   });
   

3. 使用高德地图的内置方法：

   • 高德地图API提供了disableSelect方法，可以禁用文本选择。

   marker.setClickable(true);
   marker.disableSelect();
   

4. 结合CSS和JavaScript：

   • 如果你需要更细粒度的控制，可以结合CSS和JavaScript。例如，只在特定的元素上禁止文本选择。

   .no-select {
       user-select: none;
       -webkit-user-select: none;
       -moz-user-select: none;
       -ms-user-select: none;
   }
   

   <div id="marker-content" class="no-select">这是标记的内容</div>
   

5. 监听地图的移动事件：

   • 另一种方法是监听地图的移动事件，并在移动开始时禁用文本选择，在移动结束时恢复。

   var mapContainer = document.getElementById('container');
   
   mapContainer.addEventListener('mousedown', function() {
       mapContainer.style.userSelect = 'none';
   });
   
   mapContainer.addEventListener('mouseup', function() {
       mapContainer.style.userSelect = 'auto';
   });
   

总结一下，上述解决方案都可以帮助你解决在高德地图上拖动时文本被选择的问题。你可以根据具体需求选择最适合的方法。如果只需要简单的全局解决方案，可以使用CSS来禁止文本选择。如果需要更精细的控制，可以结合JavaScript来实现。