R Plotly地图交互优化：悬停显图、点击播视频需求

针对你提出的4个优化问题，结合Plotly交互逻辑与HTML/CSS布局，给出具体修改方案如下：

1. 仅允许trace2触发视频播放 #

在点击事件回调中，通过points[0].curveNumber判断当前点击的trace索引，仅当索引匹配trace2时执行视频播放逻辑：

fig.on('plotly_click', function(data) {
  // 假设trace2是第2个trace，索引为1
  if (data.points[0].curveNumber !== 1) return;
  
  const videoUrl = data.points[0].customdata[0];
  // 后续视频播放逻辑
});

2. 将视频嵌入地图区域内 #

通过父容器相对定位+视频容器绝对定位，实现视频悬浮在地图上方：

<!-- HTML结构 -->
<div style="position: relative; width: 100%; height: 800px;">
  <div id="map"></div>
  <div id="video-container" style="position: absolute; top: 20px; right: 20px; width: 320px; height: 240px; display: none; z-index: 100; background: white;">
    <video id="video-player" controls width="100%" height="calc(100% - 30px)"></video>
  </div>
</div>

3. 实现视频关闭功能 #

在视频容器内添加关闭按钮，绑定点击事件隐藏容器并清空视频源：

// 先在HTML的video-container中添加关闭按钮
<button id="close-video" style="position: absolute; top: 5px; right: 5px; background: #ff4444; color: white; border: none; border-radius: 50%; width: 25px; height: 25px; cursor: pointer;">×</button>

// JS绑定事件
document.getElementById('close-video').addEventListener('click', function() {
  const container = document.getElementById('video-container');
  const player = document.getElementById('video-player');
  container.style.display = 'none';
  player.pause();
  player.src = '';
});

4. 恢复地图缩放功能 #

确保Plotly配置开启scrollZoom，同时避免点击事件干扰地图原生交互：

Plotly.newPlot('map', data, layout, {
  scrollZoom: true,
  displayModeBar: true
});

非trace2的点击事件直接返回，不执行任何阻止默认行为的操作，保留地图缩放、拖拽等原生功能。

完整修正代码示例 #

<!DOCTYPE html>
<html>
<head>
  <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>
<body>
  <div style="position: relative; width: 100%; height: 800px;">
    <div id="map"></div>
    <div id="video-container" style="position: absolute; top: 20px; right: 20px; width: 320px; height: 240px; display: none; z-index: 100; background: white; padding: 5px;">
      <video id="video-player" controls width="100%" height="calc(100% - 30px)"></video>
      <button id="close-video" style="position: absolute; top: 5px; right: 5px; background: #ff4444; color: white; border: none; border-radius: 50%; width: 25px; height: 25px; cursor: pointer; font-size: 16px;">×</button>
    </div>
  </div>

  <script>
    // 示例数据
    const trace1 = {
      type: 'scattermapbox',
      lat: [39.9042],
      lon: [116.4074],
      mode: 'markers',
      marker: { size: 15, color: 'blue' },
      customdata: ['https://example.com/image1.jpg'],
      hovertemplate: '<img src="%{customdata[0]}" width="200"><extra></extra>'
    };

    const trace2 = {
      type: 'scattermapbox',
      lat: [31.2304],
      lon: [121.4737],
      mode: 'markers',
      marker: { size: 15, color: 'red' },
      customdata: ['https://example.com/video1.mp4'],
      hovertemplate: '点击播放视频<extra></extra>'
    };

    const data = [trace1, trace2];

    const layout = {
      mapbox: {
        style: 'open-street-map',
        center: { lat: 35.8617, lon: 104.1954 },
        zoom: 3
      },
      height: 800
    };

    // 渲染地图
    Plotly.newPlot('map', data, layout, {
      scrollZoom: true,
      displayModeBar: true
    });

    // 点击事件处理
    const map = document.getElementById('map');
    const videoContainer = document.getElementById('video-container');
    const videoPlayer = document.getElementById('video-player');
    const closeBtn = document.getElementById('close-video');

    map.on('plotly_click', function(data) {
      // 仅处理trace2的点击（索引为1）
      if (data.points[0].curveNumber !== 1) return;

      const videoUrl = data.points[0].customdata[0];
      videoPlayer.src = videoUrl;
      videoContainer.style.display = 'block';
      videoPlayer.play();
    });

    // 关闭视频
    closeBtn.addEventListener('click', function() {
      videoContainer.style.display = 'none';
      videoPlayer.pause();
      videoPlayer.src = '';
    });
  </script>
</body>
</html>

修复trace1悬停显示无效视频链接的问题 #

之前修改后出现该问题，是因为误修改了trace1的customdata或hovertemplate：

• 确保trace1的customdata存储图片URL，而非视频URL
• 确保trace1的hovertemplate仅渲染图片，如示例中的<img src="%{customdata[0]}" width="200"><extra></extra>

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