Api 和 Ajax 加载谷歌地图标记

Question

我尝试使用 Ajax 和 Api 从服务器加载带有标记的 Google 地图。

我已经尝试了所有方法，但我不知道问题出在哪里。

地图已加载，但标记 未加载。我还附上了我的 Api 响应的 Postman 的图片。

请帮助我。我会很高兴你。

代码如下：

$.ajax({
        type: "GET",
        url: 'http://localhost:8000/api/bicykel/',
        dataType: "json",
        success: function (data) {

                $.each(data, function (marker, data) {


                    var latLng = new google.maps.LatLng(data.bicykels.lat, data.bicykels.lng);
                    bounds.extend(latLng);

                    // Creating a marker and putting it on the map
                    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>"+data.bicykels.name+"</h3>" + " " + data.bicykels.name+"</div>");
                      infoWindow.open(map, marker);
                    });

                });



        },
        error: function (data) {
            console.log('Please refresh the page and try again');
        }
    });

Api的代码如下：

def customer_get_bicykel(request):

uzivatel = request.user.id

bicykels = BicykelSerializer(
    Bicykel.objects.filter(),
    many = True,
    context = {"request": request}
).data

return JsonResponse({"bicykels": bicykels})

我还附上了 api 响应的屏幕： Api Response

感谢您的帮助！

Answer 1

您错过了将标记添加到地图的机会。引用 google maps JS 文档：

// To add the marker to the map, call setMap();
marker.setMap(map);