1

多次元のJSONがあり、そのデータを使用してGoogleマップにマーカーをプロットします。

このプラグインをJqueryで使用して、Googleマップを操作します。

現在のコードでは、マップにマーカーが表示されません。これを引き起こしている可能性がありますか？

initイベントが発生すると、スクリプトはJSONデータを反復処理し、それをマップにプロットし、各プロパティの値ごとinfo-boxesに適切な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);
                });
            });
        });
    });
});
4

3 に答える 3

1

製品は、現在のコードが想定しているよりも1レベル深くなっています。だからと

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

製品を含むオブジェクトを取得しますが、Markers自体には。というプロパティはありません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)),

2をgoogle.maps.LatLng期待numbersしているように、あなたは合格していstringsます。

ここでLatLngを取得したドキュメントを参照してください

于 2012-06-01T15:46:49.300 に答える
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 に答える