如何启用Azure Maps弹窗的文本选择功能？

Azure Maps JavaScript SDK的弹窗组件默认通过user-select: none样式禁用了文本选择，直接覆盖内容元素的CSS可能因优先级不足或选择器不对失效，可通过以下方式解决：

• 全局覆盖弹窗文本选择样式
  使用更高优先级的CSS规则，覆盖弹窗及其内部所有元素的文本选择限制：

  .azure-maps-popup,
  .azure-maps-popup-content,
  .azure-maps-popup-content * {
      user-select: text !important;
      -webkit-user-select: text !important;
      -moz-user-select: text !important;
  }
  

  !important用于确保样式优先级高于SDK内置的CSS规则，同时添加浏览器前缀兼容不同内核。

• 针对单个弹窗自定义样式
  若只需让特定弹窗支持文本选择，可在创建弹窗时给内容添加自定义类，再定向设置样式：

  1. 创建弹窗时添加自定义类：

     const popup = new atlas.Popup({
         content: `<div class="selectable-popup">需要选中的文本内容</div>`
     });
     

  2. 编写对应CSS：

     .selectable-popup,
     .selectable-popup * {
         user-select: text !important;
         -webkit-user-select: text !important;
         -moz-user-select: text !important;
     }
     

• 排查样式冲突
  若上述方法仍失效，检查页面中是否有其他CSS规则覆盖了user-select属性，可通过浏览器开发者工具查看弹窗元素的样式继承链，定位冲突规则并调整优先级。

内容的提问来源于stack exchange，提问作者Bibek Bastola