JavaScript动态生成Bootstrap卡片：构建响应式数据展示界面

<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">卡片标题</h5>
    <p class="card-text">这是卡片的主要内容，可以包含一些描述性文字。</p>
    <a href="#" class="btn btn-primary">了解更多</a>
  </div>
</div>

function updateResults(data, userLocation) {
  const resultsContainer = document.getElementById("results-container");
  // ... 其他初始化代码 ...

  resultsContainer.innerHTML = ""; // 清空现有结果

  data.businesses.forEach(result => {
    const resultElement = document.createElement("div"); // 这是一个普通的div

    const nameElement = document.createElement("h2");
    const nameLink = document.createElement("a");
    nameLink.href = result.url;
    nameLink.innerText = result.name;
    nameElement.appendChild(nameLink);

    const imageElement = document.createElement("img");
    imageElement.src = result.image_url;
    imageElement.style.width = "100px";
    imageElement.style.height = "100px";
    imageElement.style.objectFit = "cover";

    const addressElement = document.createElement("p");
    addressElement.innerText = result.location.display_address.join(", ");

    // ... 其他元素（距离、时长、价格、评分） ...

    resultElement.appendChild(nameElement);
    resultElement.appendChild(imageElement);
    resultElement.appendChild(addressElement);
    // ... 添加其他元素 ...

    // resultsContainer.appendChild(resultElement); // 最终添加到容器
  });
}

function updateResults(data, userLocation) {
  const resultsContainer = document.getElementById("results-container");
  const mapContainer = document.getElementById("map-container");

  // 清空任何现有结果
  resultsContainer.innerHTML = "";
  console.log(data.businesses.length);
  initMap(userLocation, mapContainer, data.businesses);

  // 遍历搜索结果并为每个结果创建HTML元素
  data.businesses.forEach(result => {
    // 1. 创建主卡片容器
    const cardElement = document.createElement("div");
    cardElement.className = 'card mb-3'; // 添加 'card' 类和 'mb-3' (margin-bottom) 用于间距
    cardElement.style.width = '18rem'; // 可选：设置卡片宽度，也可以通过Bootstrap栅格系统控制

    // 2. 创建图片元素并添加 'card-img-top' 类
    const imageElement = document.createElement("img");
    imageElement.src = result.image_url;
    imageElement.className = 'card-img-top';
    imageElement.alt = result.name; // 为图片添加alt文本，提高可访问性
    imageElement.style.height = "180px"; // 示例：固定图片高度
    imageElement.style.objectFit = "cover"; // 确保图片覆盖整个区域

    // 3. 创建卡片主体容器并添加 'card-body' 类
    const cardBody = document.createElement('div');
    cardBody.className = 'card-body';

    // 4. 创建标题元素并添加 'card-title' 类
    const nameElement = document.createElement("h5"); // 使用h5更符合卡片标题的语义
    nameElement.className = 'card-title';
    const nameLink = document.createElement("a");
    nameLink.href = result.url;
    nameLink.target = "_blank"; // 在新标签页打开链接
    nameLink.innerText = result.name;
    nameElement.appendChild(nameLink);

    // 5. 创建地址元素并添加 'card-text' 类
    const addressElement = document.createElement("p");
    addressElement.className = 'card-text';
    addressElement.innerText = result.location.display_address.join(", ");

    // 6. 创建距离元素并添加 'card-text' 类
    const distanceElement = document.createElement("p");
    distanceElement.className = 'card-text';
    if (result.distance_data && result.distance_data.distance) {
      distanceElement.innerText = `距离: ${result.distance_data.distance.text} 英里`;
    }

    // 7. 创建时长元素并添加 'card-text' 类
    const durationElement = document.createElement("p");
    durationElement.className = 'card-text';
    if (result.distance_data && result.distance_data.duration) {
      durationElement.innerText = `耗时: ${result.distance_data.duration.text} 分钟`;
    }

    // 8. 创建价格元素并添加 'card-text' 类
    const priceElement = document.createElement("p");
    priceElement.className = 'card-text';
    priceElement.innerText = `价格: ${result.price || 'N/A'}`; // 如果价格不存在，显示N/A

    // 9. 创建评分元素并添加 'card-text' 类
    const ratingElement = document.createElement("p");
    ratingElement.className = 'card-text';
    ratingElement.innerText = `评分: ${result.rating} 星`;

    // 10. 将所有内容元素添加到 cardBody 中
    cardBody.append(nameElement, addressElement, distanceElement, durationElement, priceElement, ratingElement);

    // 11. 将图片和卡片主体添加到主卡片容器中
    cardElement.append(imageElement, cardBody);

    // 12. 将完整的卡片添加到结果容器中
    resultsContainer.append(cardElement);
  });
}