如何将DB经纬度数据传入JSP的JavaScript脚本生成Kakao地图标记？

这个需求完全可行，下面是两种直接可用的实现方式：

方法一：通过JSTL循环直接生成LatLng实例 #

在JSP的<script>标签内，直接用<c:forEach>遍历后台传递的LHRankMap集合，逐个生成kakao.maps.LatLng实例，还能顺便完成标记添加等操作：

<!-- 先引入kakao地图SDK，替换成你的appkey -->
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=你的地图APPKEY"></script>
<script>
// 初始化地图（需确保页面有id为map的容器）
var map = new kakao.maps.Map(document.getElementById('map'), {
    center: new kakao.maps.LatLng(37.5665, 126.9780), // 初始中心坐标，可根据需求调整
    level: 3
});

// 存储生成的LatLng实例的数组
var latLngList = [];

<!-- 遍历后台集合生成坐标实例 -->
<c:forEach items="${LHRankMap}" var="location">
    // 生成kakao坐标实例
    var latLng = new kakao.maps.LatLng(${location.la}, ${location.lo});
    latLngList.push(latLng);

    // 可选：直接在地图上添加标记
    var marker = new kakao.maps.Marker({
        position: latLng,
        map: map
    });
</c:forEach>

// 后续可对latLngList做批量操作，比如调整地图视野覆盖所有坐标
if (latLngList.length > 0) {
    var bounds = new kakao.maps.LatLngBounds();
    latLngList.forEach(function(latLng) {
        bounds.extend(latLng);
    });
    map.setBounds(bounds);
}
</script>

方法二：将后台集合转为JSON数组后处理 #

先把LHRankMap转为JSON格式的数组，再用JS循环生成坐标实例，这种方式更符合前后端数据交互的常规模式：

<!-- 导入JSTL的JSON标签库 -->
<%@ taglib prefix="json" uri="http://java.sun.com/jsp/jstl/json" %>
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=你的地图APPKEY"></script>
<script>
// 将后台集合序列化为JS数组
var locationData = <json:serialize value="${LHRankMap}" />;

var map = new kakao.maps.Map(document.getElementById('map'), {
    center: new kakao.maps.LatLng(37.5665, 126.9780),
    level: 3
});

var latLngList = [];
// 循环生成LatLng实例
locationData.forEach(function(item) {
    var latLng = new kakao.maps.LatLng(item.la, item.lo);
    latLngList.push(latLng);

    // 可选：添加地图标记
    new kakao.maps.Marker({
        position: latLng,
        map: map
    });
});
</script>

注意事项 #

• 确保后台传递的la和lo是数值类型（比如Double、Float），如果是字符串需要先转成数字；
• 地图容器元素必须存在，且设置了宽高样式；
• 如果你没有引入JSTL的JSON标签库，也可以在后台用Jackson等工具把集合转为JSON字符串，再传到JSP中用${jsonStr}直接赋值给JS变量。

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