1

で生成されたPHPスクリプトからクライアントのにJSONデータを返します。これは、ユーザーがフィルタリング フォームで選択して [送信]をクリックした内容に基づいて、返されたすべてのデータを更新し、Google マップのマーカーとして表示します。SQLjQuery.each()JSON

問題は、返さJSONデータを新しいマーカーとして、既に表示されているマーカー (ページが最初に読み込まれたときのデフォルトのもの) にバインドするだけです。

ここで何が間違っていますか？

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

返された JSON は次のようになります。

[{"Name":"John Smith","Address":"123 Fake St.", "Telephone":"50011111" ,"Lat":"coord values","Lng":"coord values"},{...repeat...},{}]

送信ボタンの Jquery:

$('#myform').on('submit', function(e) {
                    e.preventDefault();
                    var myData = $('#myform').serializeArray();
                    $.getJSON('phpscript.php', myData, function(json){
                        var theMarkers = json;
                        // alert(JSON.stringify(json));
                        $.each(theMarkers, function(i, val) {                           
                            $('#map_canvas').gmap('addMarker', { 'position': new google.maps.LatLng(val.Lat, val.Lng), 'bounds':true, 'icon':'mymarker.png' } ).click(function(){                               
                                $('#map_canvas').gmap('openInfoWindow', { 'content': '<h1>'+val.Name+'</h1>'+'<h2 style="color: grey">'+val.Address+'</h2><p style="color: green">'+val.Telephone+'</p>' }, this);
                            });                     
                        });

                    }); 
                });
4

3 に答える 3

1

$.each関数でiは、 がインデックスでありval、現在の反復のオブジェクトであることがわかります。

などではないはずですが、jsonオブジェクトのこれらの値にアクセスする一方で、おそらく現在val.Nameのインデックスなどになるでしょう??val.Addressi.name4.name

于 2012-05-29T16:44:57.890 に答える
1

2つの考え：

(1) Lat と Lng は本当に言うcoord valuesのであって実数ではないのですか? （私は文字通りコメントを読んでいます）

(2) mymarker.png(正しいパス) が存在し、ブラウザーに適切にロードされますか? このファイルがないため、テストしたところ、ソースから削除するまで何も表示されませんでした。

これを使用してテストしたところ、最新の jquery-ui-map がダウンロードされて正常に動作しました。コンソールに期待される結果を出力しているため、jQuery ajax 部分が正常に動作すると仮定しました。

<html>
 <head>
 <style type="text/css">
  html, body, #map_canvas { margin: 0; padding: 0; height: 100% }
 </style>
 <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jqueryuimap.js"></script>
<script type="text/javascript">
  var map;
  var mapOptions = { center: new google.maps.LatLng(0.0, 0.0), zoom: 2,
    mapTypeId: google.maps.MapTypeId.ROADMAP };

  function initialize() {
    map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
    theMarkers = [
      {"Name":"John Smith","Address":"123 Fake St.", 
         "Telephone":"50011111" ,"Lat":"0.0","Lng":"0.0"},

      {"Name":"John Smith","Address":"123 Fake St.", 
         "Telephone":"50011111" ,"Lat":"10.0","Lng":"0.0"},

      {"Name":"John Smith","Address":"123 Fake St.", 
         "Telephone":"50011111" ,"Lat":"20.0","Lng":"0.0"}
    ]

    $.each(theMarkers, function(i, val) {
      $('#map_canvas').gmap('addMarker', 
        { 'position': new google.maps.LatLng(val.Lat, val.Lng), 
          'bounds':true } ).click(function(){                               
      $('#map_canvas').gmap('openInfoWindow', 
        { 'content': '<h1>'+val.Name+'</h1>'+
          '<h2 style="color: grey">'+val.Address+
          '</h2><p style="color: green">'+val.Telephone+'</p>' }, this);
       });   
    });
  }
  google.maps.event.addDomListener(window, 'load', initialize);
</script>

于 2012-05-29T17:18:14.123 に答える
1

すべて正常に動作します。マップに新しいマーカーを設定する直前に、これを呼び出す必要があります。

$('#map_canvas').gmap('clear', 'markers');
于 2012-05-29T17:19:44.123 に答える