Question

我有以下JS处理表单，将结果作为JSON返回，然后将json绘制为地图上的标记。虽然我确实得到了json响应，但没有绘制任何内容。我对Javascript不是很熟悉，所以有人可以让我知道下面的错误是什么吗？

由于

JSON：

[
    {
        "lat": "53.598660370500596",
        "lng": "-113.59166319101564"
    }
]

Javascript

$(function () {
    $('#search').click(function () {
        var projectNumber = $('#project_number').val();
        var setdistance = $('#setdistance').val();
        var companyType = $('#company_type').val();

        //syntax - $.post('filename', {data}, function(response){});
        $.post('business_location_get_map.php', {
            project_number: projectNumber,
            setdistance: setdistance,
            company_type: companyType
        }, function (ret) {
            $('#result').html(ret);
        });
    });
});

function initialize() {
    var mapOptions = {
        center: new google.maps.LatLng(53.5435640000, -113.5),
        zoom: 8
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"),
    mapOptions);
}

google.maps.event.addDomListener(window, 'load', initialize);

function plot() {
    $.getJSON('business_location_get_map.php', function (data) {
        var location;
        $.each(data, function (key, val) {
            addMarker(key.lat, key.lng);
        });
    });
}

function addMarker(lat, lng) {
    marker = new google.maps.Marker({
        position: new google.maps.LatLng(lat, lng),
        map: map,
        icon: redImage
    });
    markersArray.push(marker);
}

google.maps.event.addDomListener('search', 'click', plot);

编辑：

我已经改变了

(key.lat, key.lng)

到

(val.lat, val.lng)

我仍然有相同的结果，

Answer 1

问题在于$.each()

您正在将key.lat和key.lng传递给addMarker()，但key是数组中当前元素的索引。您必须使用val，因为它具有真正的价值：

$.each(data, function (key, val) {
   addMarker(val.lat, val.lng);
});

有关$.each()的使用的更多信息：https://api.jquery.com/each/

Google地图：从JSON加载标记

1 个答案: