0

いくつかの json マーカーをマップに表示しようとしています。

マップは実際に表示されていますが、ポインターが表示されておらず、マップの位置がかなりずれています。

jsコードは次のとおりです。

<script>

    $('#map_canvas').gmap().bind('init', function() { 
    // This URL won't work on your localhost, so you need to change it
    // see http://en.wikipedia.org/wiki/Same_origin_policy
    $.getJSON( 'locations.json', function(data) { 
        $.each( data.markers, function(i, marker) {
            $('#map_canvas').gmap('addMarker', { 
                'position': new google.maps.LatLng(marker.latitude, marker.longitude), 
                'bounds': true 
            }).click(function() {
                $('#map_canvas').gmap('openInfoWindow', {'content': marker.content }, this);
            });
        });
    });
});
</script>

json ファイルの内容は次のとおりです。

{"locations":[{"id":"14","location":"(50.8765125,
 -1.1504182944499557)"}]}

コードに何か問題がありますか？

4

1 に答える 1

1

あなたのファイルの構造から、json私はあなたがの各アイテムの未定義のプロパティにアクセスしようとしていると思いますdata.markers. 長さ 2 のis aとis anのlocations2 つのプロパティを持つオブジェクトの配列です。では、なぜこのコードなのでしょうか?idStringlocationsarray

marker.latitude
marker.longitude
marker.content

多分あなたは試してみるべきです

marker.location[0]
marker.location[1]

まず、json の出力を確認する必要があります。

$.getJSON( 'locations.json', function(data) { 
    console.log(data);
}

そして、あなたの質問に投稿してください...

よろしければ、次のようにしてみてください。

$.each( data.markers, function(i, marker) {
        $('#map_canvas').gmap('addMarker', { 
            'position': new google.maps.LatLng(marker.location[0], marker.location[1]), 
            'bounds': true 
        }).click(function() {
            $('#map_canvas').gmap('openInfoWindow', {'content': marker.id }, this);
        });
    });

...実際には、なぜあなたがdata.markeralso と notを使用するのかわかりませんdata.locations

于 2012-09-15T11:07:08.390 に答える