Laravel中如何在JavaScript函数内调用路由并结合Google Map Marker

嘿，我太懂你遇到的这个坑了！问题的核心在于Blade模板是服务器端渲染的，而你的data.id是客户端JavaScript变量——两者的执行时机完全不一样，Blade在服务器编译页面的时候，根本不知道data.id是什么东西，所以直接写在Blade路由里肯定生成不了正确的链接。

给你两种简单可行的解决方案：

方法一：用占位符替换生成路由 #

先在Blade里生成带占位符的路由模板，然后在JavaScript里把占位符替换成实际的item.id：

// 注意这里要多传一个itemId参数
function htmlInfo(name, descrip, itemId){ 
    // 先让Blade生成基础路由，用__ID__当占位符
    const baseRoute = "{{ route('destinos.detalle', ['id' => '__ID__']) }}";
    // 把占位符替换成当前标记的实际ID
    const detailUrl = baseRoute.replace('__ID__', itemId);
    
    // 用JS模板字符串拼接HTML，比字符串累加更清晰
    return `
        <div class="content_maps">
            <a href="${detailUrl}"><h5>${name}</h5></a>
            <p>${descrip}</p>
        </div>
    `;
}

然后你在遍历data创建标记的时候，要把每个item的id传进去：

data.forEach(item => {
    // 这里省略创建Google Maps标记的代码...
    const infoWindow = new google.maps.InfoWindow({
        content: htmlInfo(item.name, item.descrip, item.id)
    });
    // 绑定信息窗口到标记上...
});

方法二：直接拼接基础URL #

如果你的路由结构比较简单（比如destinos/detalle/{id}），也可以直接用Laravel的url()函数生成基础路径，再拼接ID：

function htmlInfo(name, descrip, itemId){ 
    const baseUrl = "{{ url('destinos/detalle') }}";
    const detailUrl = `${baseUrl}/${itemId}`;
    
    return `
        <div class="content_maps">
            <a href="${detailUrl}"><h5>${name}</h5></a>
            <p>${descrip}</p>
        </div>
    `;
}

为什么原来的代码不行？ #

再给你捋一遍原因：当服务器处理Blade模板时，{{ route(...) }}会被编译成具体的URL，但此时data.id还只是一个JavaScript变量的字符串，服务器根本不知道它的值，所以最终生成的URL里的id会是data.id这几个字符，而不是你期望的实际ID数值。

这样改完之后，信息窗口里的标题就能正确跳转到对应详情页啦！

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