Question

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

我已经尝试了一切，但我不知道问题在哪里。

已加载地图，但标记不是。我还附上了我的Api回应邮递员的照片。

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

以下是代码：

$.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

您错过了将标记添加到地图中。引用谷歌地图JS文档：

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

Api和Ajax加载谷歌地图标记

1 个答案: