如何在Google Maps信息窗口中显示数据库多列数据？

要在信息窗口里展示多个字段，需要调整数据传递的结构，同时修改信息窗口的内容拼接逻辑，具体操作如下：

1. 修改控制器代码（GoogleController） #

把原来的索引数组改成关联数组，明确每个字段的键名，方便后续前端调用：

public function index()
{
    $data = Pelabuhan::all();
    $locations = [];
    foreach ($data as $item) {
        $locations[] = [
            'nama_pelabuhan' => $item->nama_pelabuhan,
            'latitude' => $item->latitude,
            'longitude' => $item->longitude,
            'title' => $item->title,
            // 可在此添加其他需要展示的字段，比如地址、联系电话等
            // 'alamat' => $item->alamat,
        ];
    }
    
    return view('sinkopel', [
        'data' => $data,
        'locations' => $locations,
        'title' => 'Home'
    ]);
}

2. 修改视图代码中的信息窗口内容 #

通过模板字符串拼接多个字段为HTML结构，自定义展示格式：

<div id="map"></div>
<script type="text/javascript">
    function initMap() {
        const myLatLng = { lat: -8.636176573413225, lng: 117.53647409339307 }; 
        const map = new google.maps.Map(document.getElementById("map"), {
            zoom: 9.1,
            center: myLatLng,
        });

        var locations = {{ Illuminate\Support\Js::from($locations) }};

        var infowindow = new google.maps.InfoWindow();

        var marker, i;
        
        for (i = 0; i < locations.length; i++) {  
              marker = new google.maps.Marker({
                position: new google.maps.LatLng(locations[i].latitude, locations[i].longitude),
                map: map
              });
                
              google.maps.event.addListener(marker, 'click', (function(marker, i) {
                return function() {
                  // 拼接多个字段为结构化HTML
                  var content = `
                    <div class="info-window">
                      <h3>${locations[i].title}</h3>
                      <p><strong>港口名称:</strong> ${locations[i].nama_pelabuhan}</p>
                      <!-- 如需添加更多字段，直接在此扩展即可 -->
                      <!-- <p><strong>地址:</strong> ${locations[i].alamat}</p> -->
                    </div>
                  `;
                  infowindow.setContent(content);
                  infowindow.open(map, marker);
                }
              })(marker, i));
        }
    }
    window.initMap = initMap;
</script>

<script type="text/javascript"
    src="https://maps.google.com/maps/api/js?key={{ env('GOOGLE_MAP_KEY') }}&callback=initMap" >
</script>

说明 #

• 关联数组的结构让字段调用更直观，避免索引混乱；
• HTML拼接可以自定义排版，比如添加标题、加粗标签，甚至引入CSS样式优化展示效果；
• 后续要新增字段时，只需在控制器的数组中添加对应字段，再在视图的content里补充HTML元素即可。

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