如何为Google Maps API地图上的每个标记在模态框中显示动态图片

// app/Http/Controllers/YourController.php (例如 WelcomeController)

namespace App\Http\Controllers;

use App\Models\Problem; // 假设你的Problem模型路径
use Illuminate\Http\Request;

class WelcomeController extends Controller
{
    public function welcomePage()
    {
        // 使用 with('problemImages') 预加载关联的图片，避免N+1查询问题
        $problems = Problem::with('problemImages')->get();

        return view('welcomePage')
            ->with('problems', $problems);
    }
}

<!-- welcomePage.blade.php -->

<!-- ... 其他 HTML 内容 ... -->

<!-- 图片模态框 -->
<div class="modal fade" id="imageModal" tabindex="-1" role="dialog" aria-labelledby="imageModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="imageModalLabel">标记详情图片</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body text-center">
                <img id="modalImage" src="" alt="Marker Image" class="img-fluid">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>

<!-- ... 其他 HTML 内容 ... -->

// welcomePage.blade.php (在 <script> 标签内)

var map;
function initAutocomplete() {
    const centerMap = {lat: 48.3767994, lng: 17.5835082};
    map = new google.maps.Map(document.getElementById('map'), {
        center: centerMap,
        zoom: 11,
        mapTypeId: 'roadmap'
    });
    displayMarkers();
}

function displayMarkers() {
    @foreach($problems as $problem)
        var loc = split("{{ $problem->location }}");
        // 确保 $problem->problemImages 存在且至少有一个图片
        // 假设每个问题至少有一张图片，且图片路径可以通过 asset() 辅助函数获取
        @php
            $imageUrl = '';
            if ($problem->problemImages->isNotEmpty()) {
                $imageUrl = asset('storage/' . $problem->problemImages[0]['name_of_the_file']);
            }
        @endphp
        createMarker(getLocVar(loc[0], loc[1]), map, "{{$problem->id}}", "{{ $imageUrl }}");
    @endforeach
}

function createMarker(location, map, id, imageUrl) {
    let marker = new google.maps.Marker({
        position: location,
        animation: google.maps.Animation.DROP,
        map: map,
    });

    // 将图片URL作为data属性嵌入到链接中
    let infoWindowContent = `
        <p><b>ID: </b>${id}</p>
        <a href="#" class="show-image-link" data-image-url="${imageUrl}" data-toggle="modal" data-target="#imageModal">显示图片</a>
    `;

    let infoWindow = new google.maps.InfoWindow({
        content: infoWindowContent
    });

    marker.addListener('click', function () {
        infoWindow.open(map, marker);
    });
}

function split(str) {
    return str.split(",");
}

function getLocVar(lat, lng) {
    return new google.maps.LatLng(parseFloat(lat), parseFloat(lng));
}

// === 新增：处理模态框显示逻辑的JavaScript代码 ===
// 使用jQuery监听文档上动态生成的 .show-image-link 元素的点击事件
$(document).on('click', '.show-image-link', function(e) {
    e.preventDefault(); // 阻止链接的默认行为（例如页面跳转）
    var imageUrl = $(this).data('image-url'); // 从data-image-url属性获取图片URL
    $('#modalImage').attr('src', imageUrl); // 设置模态框中图片的src属性
    // Bootstrap的data-toggle和data-target属性会自动处理模态框的显示
    // 如果不使用data属性，可以手动调用：$('#imageModal').modal('show');
});

// 可选：当模态框关闭时，清除图片src，防止下次打开时闪烁或显示旧图片
$('#imageModal').on('hidden.bs.modal', function () {
    $('#modalImage').attr('src', '');
});