Laravel如何将控制器传递到视图的数据传给public目录下的JS文件使用

核心逻辑：public目录下的静态JS文件无法直接读取Blade模板中的PHP变量，需通过视图层做中转，将后端变量导出为前端可访问的全局JS变量，再在maps.js中调用即可。

• 第一步：修改Blade视图文件
  在原有视图代码基础上，加载maps.js之前先定义全局JS变量存储位置数据，使用Laravel自带的@json指令输出，自动处理转义避免安全问题：

<div id="world-map"></div>

<!-- 先定义全局位置变量，必须放在maps.js引入之前 -->
<script>
window.locationData = @json($location);
</script>

<!-- 此处为你原有引入maps.js的代码，保持路径不变即可 -->
<script src="/js/maps.js"></script>

• 第二步：修改maps.js中的地图初始化逻辑
  将原有的固定markers数组改为动态拼接，加入后端传递的位置数据，同时增加非空判断避免报错：

var handleVectorMap = function() {
    "use strict";
    if ($('#world-map').length !== 0) {
        // 原有固定标记
        let markers = [
            {latLng: [41.90, 12.45], name: 'Vatican City'},
            {latLng: [43.73, 7.41], name: 'Monaco'},
        ];
        // 追加后端传递的位置数据
        if (window.locationData && window.locationData.latitude && window.locationData.longitude) {
            markers.push({
                latLng: [window.locationData.latitude, window.locationData.longitude],
                // 字段名可根据你使用的Location扩展包实际返回值调整
                name: window.locationData.city_name || window.locationData.country_name || '未知位置'
            })
        }

        $('#world-map').vectorMap({
            map: 'world_mill',
            scaleColors: [COLOR_GREY_DARKER, COLOR_GREY_LIGHTER],
            normalizeFunction: 'polynomial',
            hoverOpacity: 0.5,
            hoverColor: false,
            zoomOnScroll: true,
            markerStyle: {
                initial: {
                    fill: COLOR_RED,
                    stroke: 'transparent',
                    r: 3
                }
            },
            regionStyle: {
                initial: {
                    fill: COLOR_DARK_LIGHTER,
                    "fill-opacity": 1,
                    stroke: 'none',
                    "stroke-width": 0.4,
                    "stroke-opacity": 1
                },
                hover: {
                    "fill-opacity": 0.8
                },
                selected: {
                    fill: 'yellow'
                },
                selectedHover: { }
            },
            backgroundColor: 'transparent',
            markers: markers // 替换为动态生成的标记数组
        });
    }
};

• 补充说明
  如果需要传递多组位置数据，只需在控制器中返回位置数组，前端直接遍历数组批量追加到markers中即可。

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