使用Ajax和Api加载Google Maps标记失败求助

从你的代码和API响应结构来看，问题出在前端遍历数据源的方式错误——后端返回的是一个包含bicykels数组的对象，但你直接遍历了整个data对象，而非实际存储标记数据的数组，导致无法正确创建标记。下面是具体的修复方案：

核心问题分析 #

后端API返回的JSON结构是：

{
  "bicykels": [
    {"lat": xxx, "lng": xxx, "name": xxx},
    {"lat": xxx, "lng": xxx, "name": xxx},
    ...
  ]
}

但你的前端代码里用$.each(data, ...)遍历了整个顶层对象，而不是data.bicykels这个数组，自然无法拿到每个标记的经纬度和名称。

修复后的前端代码 #

$.ajax({
    type: "GET",
    url: 'http://localhost:8000/api/bicykel/',
    dataType: "json",
    success: function (data) {
        // 遍历实际的标记数据数组：data.bicykels
        $.each(data.bicykels, function (index, item) {
            var latLng = new google.maps.LatLng(item.lat, item.lng);
            bounds.extend(latLng);
            
            // 创建标记并添加到地图
            var marker = new google.maps.Marker({
                position: latLng,
                map: map,
            });
            
            google.maps.event.addListener(marker, 'click', function () {
                infoWindow.setContent("<div class='pt-5 bg-dark p-4' style='width:300px;'>"+"<h3>"+item.name+"</h3>" + " " + item.name+"</div>");
                infoWindow.open(map, marker);
            });
        });
    },
    error: function (data) {
        console.log('Please refresh the page and try again');
    }
});

额外排查建议 #

1. 查看控制台报错：打开浏览器开发者工具（F12）的Console标签，检查是否有undefined相关的报错，这能快速定位属性访问错误。
2. 确认数据源结构：在success回调开头添加console.log(data)，确认你拿到的JSON结构和预期一致。
3. 检查变量初始化：确保map和bounds变量在Ajax回调外已经正确初始化，避免标记无法绑定到地图实例。

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