1

根据用户在过滤表单中选择的内容并单击提交，我将使用 , 生成的PHP脚本中的JSON数据返回到我的客户端，以更新所有返回的数据并将其显示为我的 Google 地图上的标记。SQLjQuery.each()JSON

问题不是将返回的JSON数据显示为新标记，而是将其限制在已显示的标记上（最初加载页面时的默认标记）。

我在这里做错了什么？

我使用这个 jQuery 插件来处理我的谷歌地图。

我返回的 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是当前迭代中的对象。

你确定它不应该是val.Name，val.Address等等，因为这会访问你的json对象中的那些值，另一方面i.name可能只是当前索引，比如4.name等等？？

于 2012-05-29T16:44:57.890 回答
1

两个想法：

(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 回答