jquery - 如何使用 jQuery 访问多维 JSON 的值并将它们绘制在 Google map 上

Question

我有一个多维 JSON，我想用它的数据在我的 Google map 上绘制标记。

我使用 this plugin for Jquery 来处理我的 Google map 。

使用我当前的代码，我在 map 上看不到任何标记。可能是什么原因造成的？

在发生 init 事件时 - 脚本应迭代 JSON 数据，将其绘制在 map 上，并创建/附加信息框为每个标记的每个属性的每个值使用适当的 HTML 标记。

我的 JSON 如下所示:

[{product:{productName:"ProductA", productPrice:"19.99", productQuantity:"12", Lat:"53.573858", Lng:"45.985456"}},{product:{... repeat ...}}, {...}]

我的 jQuery 的 $.each() 看起来像这样:

$('#map').gmap(mapOptions).bind('init', function () {
    $.post('myscript.php', function (json) {
        var theMarkers = json;
        $.each(theMarkers.product, function (i, object) {
            $.each(object, function (property, value) {
                $('#map').gmap('addMarker', {
                    'position': new google.maps.LatLng(object.Lat.value, object.Lng.value),
                    'bounds': true,
                    'icon': 'myicon.png'
                }).click(function () {
                    $('#map').gmap('openInfoWindow', {
                        'content': '<h1>' + object.productName.value + '</h1>' + '<h2 style="color: grey">' + object.productPrice.value + '</h2><p style="color: green">' + object.productQuantity.value + '</p>'
                    }, this);
                });
            });
        });
    });
});

Answer 1

这些产品比您当前代码假设的更深一层。所以与

var theMarkers = json;
$.each(theMarkers, function (i, object) {
...

您将获得包含您的产品的对象，但 Markers 本身没有任何名为 product 的属性。

您可以使用以下代码进行测试:

$.each(theMarkers, function (i, o) {
  console.log(i, o);
});