技术问询：如何在网站上展示Google Maps侧边窗口信息？

嘿，我来帮你搞定这个能展示评论、图片等内容的Google Maps侧边窗口！结合你现在只能显示标记的情况，咱们一步步来实现：

首先在页面里加一个侧边栏容器，用来承载位置的评论、图片等内容，默认可以设置为隐藏状态：

<!-- 侧边栏容器 -->
<div id="map-sidebar">
  <button id="close-sidebar">×</button>
  <div id="sidebar-content"></div>
</div>

<!-- Google Maps 容器 -->
<div id="map"></div>

然后给侧边栏加一些基础样式，让它固定在页面一侧并带有过渡效果：

#map-sidebar {
  position: fixed;
  top: 0;
  right: 0;
  width: 320px;
  height: 100vh;
  background: white;
  box-shadow: -2px 0 5px rgba(0,0,0,0.1);
  padding: 20px;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform 0.3s ease;
}

#map-sidebar.active {
  transform: translateX(0);
}

#close-sidebar {
  position: absolute;
  top: 10px;
  right: 15px;
  border: none;
  background: transparent;
  font-size: 24px;
  cursor: pointer;
}

#map {
  height: 100vh;
  width: 100%;
}

在初始化Google Maps和标记的时候，给每个标记绑定点击事件，触发侧边栏内容的更新。这里假设你已经有每个标记对应的位置数据（包含评论、图片URL等）：

// 初始化地图
function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: 40.7128, lng: -74.0060 },
    zoom: 12,
  });

  // 示例位置数据：每个标记对应的评论、图片等
  const locations = [
    {
      position: { lat: 40.7128, lng: -74.0060 },
      title: "纽约时代广场",
      image: "https://example.com/times-square.jpg", // 替换成实际图片URL
      comments: [
        "这里太热闹了，夜晚的灯光超赞！",
        "适合拍照打卡，人真的很多"
      ]
    },
    {
      position: { lat: 40.730610, lng: -73.935242 },
      title: "布鲁克林大桥",
      image: "https://example.com/brooklyn-bridge.jpg",
      comments: [
        "步行过桥的体验很棒，可以看到曼哈顿天际线",
        "建议日落时分来，景色绝美"
      ]
    }
  ];

  // 遍历创建标记并绑定点击事件
  locations.forEach(location => {
    const marker = new google.maps.Marker({
      position: location.position,
      map: map,
      title: location.title
    });

    // 标记点击事件：更新侧边栏内容并显示
    marker.addListener("click", () => {
      renderSidebarContent(location);
      document.getElementById("map-sidebar").classList.add("active");
    });
  });

  // 关闭侧边栏按钮事件
  document.getElementById("close-sidebar").addEventListener("click", () => {
    document.getElementById("map-sidebar").classList.remove("active");
  });
}

这个函数负责把位置的图片、评论等数据动态插入到侧边栏里：

function renderSidebarContent(location) {
  const contentEl = document.getElementById("sidebar-content");
  
  // 生成评论列表的HTML
  const commentsHtml = location.comments.map(comment => `
    <li>${comment}</li>
  `).join("");

  // 渲染完整内容
  contentEl.innerHTML = `
    <h3>${location.title}</h3>
    <img src="${location.image}" alt="${location.title}" style="width:100%; margin:10px 0; border-radius:4px;">
    <h4>用户评论</h4>
    <ul>${commentsHtml}</ul>
  `;
}

• 确保你已经正确引入了Google Maps的API脚本（替换成你的API密钥），比如在页面底部添加：

  <script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"></script>
  

• 图片URL要确保可以正常访问，或者替换成你的本地图片路径
• 如果你的位置数据是从后端接口获取的，只需要把locations数组替换成接口返回的数据即可
• 可以根据需求调整侧边栏的样式，比如宽度、配色、动画速度等

这样一来，当用户点击地图上的标记时，侧边栏就会滑出来，展示该位置的图片、评论等内容啦！

内容的提问来源于stack exchange，提问作者J.K. Harthoorn