1

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

我使用这个插件让 Jquery与我的Google Map一起工作。

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

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);
                });
            });
        });
    });
});
4

3 回答 3

1

解决方案：

$('#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);
                                    }); 
                            });
                        });
                    }); 

                });
于 2012-06-01T16:13:02.130 回答
1

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

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

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

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

$.each(theMarkers, function (i, o) {
  console.log(i, o);
});
于 2012-06-01T15:11:39.317 回答
1

你应该这样做：

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

正如google.maps.LatLng预期的那样 2numbers并且您正在通过strings.

请参阅此处获取 LatLng 的文档

于 2012-06-01T15:46:49.300 回答