jQuery.each()不能正确地处理从PHP返回的JSON，以便在谷歌映射上显示为新的标记

I return JSON data from a PHP script, generated with SQL, to my client's jQuery.each(), based on what user has selected in the filtering form and clicked Submit, to update and display all the returned JSON data as markers on my Google Map.

我将使用SQL生成的PHP脚本中的JSON数据返回给我的客户端jQuery.each()，基于用户在过滤表单中选择并单击Submit，以更新和显示所有返回的JSON数据作为我的谷歌映射上的标记。

Problem is instead of displaying the returned JSON data as new markers it just bounds on the already displayed markers ( the default ones when page is initially loaded ).

问题不是将返回的JSON数据显示为新的标记，而是在已经显示的标记上(当页面最初加载时默认的标记)。

What am I doing wrong here?

我在这里做错了什么?

I use this jQuery plugin to work with my Google Map.

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

My returned JSON looks like this:

我返回的JSON是这样的:

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

Jquery for submit button:

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

                    }); 
                });

3 个解决方案

#1

You do realise that in your $.each function, i is the index, and val is the object in the current iteration.

你确实意识到了这一点。每个函数，i是索引，val是当前迭代中的对象。

Are you sure it should'nt be val.Name, val.Address etc. as that would access those values in your json object, on the other hand i.name will probably just be the current index, like 4.name etc. ??

你确定它不应该是value .name, var . address等等，因为这会访问json对象中的值，另一方面i.name可能只是当前的索引，比如4.name等等?

#2

Two thoughts:

两个想法:

(1) Do Lat and Lng really say coord values and not real numbers? (I'm reading the comments literally)

(1) Lat和Lng是否真的说coord值而不是真实数字?(我正在逐字读评论)

(2) Does mymarker.png exist (right path) and load properly in the browser? Since I don't have this file, when I tested, nothing appeared until I removed it from the source.

(2)mymarker。png是否存在(正确的路径)并在浏览器中正确加载?因为我没有这个文件，当我测试时，直到我从源代码中删除它时才出现。

I used this to test and it worked fine, with the latest jquery-ui-map downloaded. I just assumed the jQuery ajax part works fine because you are outputting the expected results in the console.

我使用它进行测试，它工作得很好，下载了最新的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>

#3

Everything works fine. You have to call this just before populating the map with new markers.

一切工作正常。你必须在用新的标记填充地图之前调用这个。

$('#map_canvas').gmap('clear', 'markers');

#1