基于循环动态数据在单页展示多个Google Maps的技术问询

完全可以实现动态渲染1到20个Google Maps，我结合你的Laravel Blade代码给你整理一套可行方案：

1. 调整Blade模板结构 #

首先在循环里给每个地图容器分配唯一ID，同时把该条数据的经纬度存在容器的data-*属性里（方便JS读取）：

<div class="container results">
  <div class="row">
    <div class="col-12">
      @if(count($results) > 0)
        @foreach($results as $index => $r)
          <div class="result mb-4">
            <p><label>Name: </label> {{ $r->name }}</p>
            <!-- 唯一ID的地图容器，存经纬度数据 -->
            <div 
              id="map-{{ $index }}" 
              class="google-map" 
              style="height: 300px; width: 100%;"
              data-lat="{{ $r->latitude }}"
              data-lng="{{ $r->longitude }}"
            ></div>
          </div>
        @endforeach
      @endif
    </div>
  </div>
</div>

2. 编写Google Maps初始化逻辑 #

接下来写JS代码，循环所有地图容器，逐个初始化地图。注意要确保Google Maps脚本已经加载（可以异步加载，或者直接在页面底部引入）：

// 假设你已经加载了Google Maps API脚本（带你的API_KEY）
function initAllMaps() {
  // 获取所有地图容器
  const mapContainers = document.querySelectorAll('.google-map');
  
  mapContainers.forEach(container => {
    const lat = parseFloat(container.dataset.lat);
    const lng = parseFloat(container.dataset.lng);
    
    // 初始化单个地图
    const map = new google.maps.Map(container, {
      center: { lat, lng },
      zoom: 12 // 可根据需求调整缩放级别
    });
    
    // 可选：给每个地图添加标记
    new google.maps.Marker({
      position: { lat, lng },
      map: map,
      title: container.previousElementSibling.textContent // 用名称当标记标题
    });
  });
}

// 确保Google Maps加载完成后再执行初始化
// 如果是异步加载API，可以把initAllMaps作为回调函数
window.onload = initAllMaps;

3. 关键注意事项 #

• 唯一容器ID：每个地图必须有独立的DOM ID，否则Google Maps无法区分不同的地图实例
• API密钥：确保你的Google Maps API密钥已经启用了Maps JavaScript API，并且没有跨域或配额问题
• 性能优化：如果要渲染20个地图，建议给地图容器设置合适的尺寸（不要太大），或者考虑懒加载（比如只初始化当前视口内的地图），避免页面加载过慢
• 数据传递：通过data-*属性传递经纬度是最简洁的方式，也可以把所有坐标数据先存在一个JS数组里再循环初始化

这样就能根据$results的数量动态渲染对应数量的Google Maps了，从1个到20个都能完美适配～

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