移动地图时，在谷歌地图中更新Ajax Json数组中的标记

Question

我希望我的Google地图在移动地图时更新标记 - 使用bounds_changed或idle - 通过提交新的Ajax，删除现有标记并放置新集合。

到目前为止，我有以下两个脚本： - 第一个从JSON数组中读取标题，纬度和经度，并正确地将标记放在地图中。但是我无法正确添加bounds_changed代码。 - 第二个脚本包含一个bounds_changed触发器，它将一组新标记加载到div中，但我不知道如何输入该数组作为标记的数据（并更新它们）。

如果你可以帮我修复这两个脚本中的任何一个，这样我就可以使两个东西都能正常工作 - 从脚本1中读取JSON数组中的标记，并在脚本2中移动map时更新数组 - 我将非常感激。

我已经尝试了很多变化，并阅读了所有关于问题的问题而没有运气。完全卡住了！

脚本1 - 从JSON数组中获取标记：

<script>
jQuery(function($) {
    // Asynchronously Load the map API
    var script = document.createElement('script');
    script.src = "https://maps.googleapis.com/maps/api/js?key=SECRET&sensor=false&callback=initialize";
    document.body.appendChild(script);
});

function initialize() {
    var map;
    var bounds = new google.maps.LatLngBounds();
    var mapOptions = {
        mapTypeId: 'roadmap'
    };
    ne_lng = -70.18087440625004;
    sw_lng = -92.10958534375004;
    ne_lat = 44.078852008513245;
    sw_lat = 28.9109895909681;

    // Display a map on the page
    map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
    map.setTilt(45);
    var latlngData = 0;

        // Info Window Content
        var infoWindowContent = [
            ['<div class="info_content">' +
            '<h3>London Eye</h3>' +
            '<p>The London Eye is a giant Ferris wheel situated on the banks of the River Thames. The entire structure is 135 metres (443 ft) tall and the wheel has a diameter of 120 metres (394 ft).</p>' + '</div>'],
            ['<div class="info_content">' +
            '<h3>Palace of Westminster</h3>' +
            '<p>The Palace of Westminster is the meeting place of the House of Commons and the House of Lords, the two houses of the Parliament of the United Kingdom. Commonly known as the Houses of Parliament after its tenants.</p>' +
            '</div>']
        ];

        // Display multiple markers on a map, same info for everyone, just an example
        var infoWindow = new google.maps.InfoWindow(), marker, i;

        // Loop through our array of markers & place each one on the map, fetching avg_gps_latitude,   avg_gps_longitude from latlngData, received from ajax call ( but it dodn't work)
        loadLocations().done(function (latlngData) {


            for (i = 0; i < latlngData.length; i++) {
                var position = new google.maps.LatLng(latlngData[i].latitude, latlngData[i].longitude);
                bounds.extend(position);
                marker = new google.maps.Marker({
                    position: position,
                    map: map,
                    title: latlngData[i].ssid
                });

                // Allow each marker to have an info window
                google.maps.event.addListener(marker, 'click', (function (marker, i) {
                    return function () {
                        infoWindow.setContent(infoWindowContent[0][0]);
                        infoWindow.open(map, marker);
                    }
                })(marker, i));

                // Automatically center the map fitting all markers on the screen
                map.fitBounds(bounds);
            }

          });


        // Override our map zoom level once our fitBounds function runs (Make sure it only runs once)
        var boundsListener = google.maps.event.addListener((map), 'bounds_changed', function (event) {
            this.setZoom(6);
            google.maps.event.removeListener(boundsListener);
        });
    }


    function loadLocations()
    {
        return $.ajax({
              type:'POST',
              url: 'includes/newjson.php',
              dataType: 'json',
              data:{
                a: ne_lat,
                b: ne_lng,
                c: sw_lat,
                d: sw_lng
      },
      async: true,
      //cache: false,
      success: function(result){
          console.log("successx");
          console.log(result);
          var jsonStr = JSON.stringify(result);
          $('#results').html(jsonStr);
          // $('#results').html(result);
           // initialize();
          },
        error: function (xhr, ajaxOptions, thrownError) {
          alert(xhr.status);
          alert(thrownError);
        }
  });
  }

  //  google.maps.event.addDomListener(window, 'load', initialize);


</script>

脚本2 - 在移动地图但未传递到Google地图标记时，使用JSON数组更新#result中的数组（原始数组在脚本中作为PHP变量输入）：

    <script type="text/javascript">
jQuery(function($) {
    // Asynchronously Load the map API
    var script = document.createElement('script');
    script.src = "https://maps.googleapis.com/maps/api/js?key=SECRET&sensor=false&callback=initialize";
    document.body.appendChild(script);
});

function initialize() {
    var map;
    var bounds = new google.maps.LatLngBounds();
    var mapOptions = {
        mapTypeId: 'roadmap'
    };

    // Display a map on the page
    map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
    map.setTilt(45);

    google.maps.event.addListener(map, 'bounds_changed', function(){
        // alert(this.getBounds());
    ne_lng = map.getBounds().getNorthEast().lng();
    sw_lng = map.getBounds().getSouthWest().lng();
    ne_lat = map.getBounds().getNorthEast().lat();
    sw_lat = map.getBounds().getSouthWest().lat();
    console.log(ne_lng);
    console.log(sw_lng);
    console.log(ne_lat);
    console.log(sw_lat);

    $.ajax({
        type:'POST',
        url: 'includes/mapQuery.php',
        data:{
          a: ne_lat,
          b: ne_lng,
          c: sw_lat,
          d: sw_lng
},
async: true,
cache: false,
        success: function(result){
            console.log("success");
            $('#results').html(result);
            // newmarkers = result;
            // console.log(newmarkers);
        } // End of success function of ajax form
    }); // End of ajax call

    });

    // Multiple Markers
    var markers =
    <?php
        echo str_replace('"', "'", json_encode($maparray, JSON_NUMERIC_CHECK));
    ?>
    ;

    // Info Window Content
    var infoWindowContent = [
        ['<div class="info_content">' +
        '<h3>London Eye</h3>' +
        '<p>The London Eye is a giant Ferris wheel situated on the banks of the River Thames. The entire structure is 135 metres (443 ft) tall and the wheel has a diameter of 120 metres (394 ft).</p>' +        '</div>'],
        ['<div class="info_content">' +
        '<h3>Palace of Westminster</h3>' +
        '<p>The Palace of Westminster is the meeting place of the House of Commons and the House of Lords, the two houses of the Parliament of the United Kingdom. Commonly known as the Houses of Parliament after its tenants.</p>' +
        '</div>']
    ];

    // Display multiple markers on a map
    var infoWindow = new google.maps.InfoWindow(), marker, i;

    // Loop through our array of markers & place each one on the map
    for( i = 0; i < markers.length; i++ ) {
        var position = new google.maps.LatLng(markers[i][1], markers[i][2]);
        bounds.extend(position);
        var iconBase = 'img/icons/';
        marker = new google.maps.Marker({
            position: position,
            map: map,
            icon: iconBase + 'student-icon.png',
            title: markers[i][0]
        });

        // Allow each marker to have an info window
        google.maps.event.addListener(marker, 'click', (function(marker, i) {
            return function() {
                infoWindow.setContent(infoWindowContent[i][0]);
                infoWindow.open(map, marker);
            }
        })(marker, i));

        // Automatically center the map fitting all markers on the screen
        map.fitBounds(bounds);
    }

    // Override our map zoom level once our fitBounds function runs (Make sure it only runs once)
    var boundsListener = google.maps.event.addListener((map), 'bounds_changed', function(event) {
        this.setZoom(6);
        google.maps.event.removeListener(boundsListener);
    });



}</script>

Answer 1

另一答案