Question

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

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

使用我当前的代码，我在地图上看不到任何标记。可能导致这种情况的原因是什么？

在init事件发生后，脚本应迭代 JSON 数据，将其绘制在地图上，然后使用适当的 HTML创建/附加info-boxes 每个标记的每个值的标记。

我的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) {
...

您将获取包含您的产品的对象，但是漫游者本身没有任何名为product的属性。

您可以使用以下代码对此进行测试：

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

Answer 2

你应该这样做：

'position': new google.maps.LatLng(parseFloat(object.Lat.value), parseFloat(object.Lng.value)),

，因为google.maps.LatLng需要2 numbers而您正在通过strings。

See the docs got LatLng here

Answer 3

的解决方案： 的

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

如何使用jQuery访问多维JSON的值并将其绘制在Google Map上

3 个答案: