谷歌地图：从 JSON 加载标记

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/