Question

我目前正在使用ajax在谷歌地图上绘制标记（使用重叠的蜘蛛网脚本的修改版本（https://github.com/jawj/OverlappingMarkerSpiderfier）。

这一切都有效，然后我需要在点击我的搜索按钮时加载ajax。当我没有加载时单击按钮，然后再次单击它。我需要在此脚本中更改哪些内容才能使其正常工作？

<script>
             function loadMapData()
          {

         var markers = [];

            $.ajax({
                type: "GET",
                url: "maps2.php",
                success: function(data)
                {

                    for (var i = 0; i < data.length; i++)
                    {
                        markers.push({
                            lon: data[i].long,
                            lat: data[i].lat,
                            h: data[i].city,
                            d: data[i].post_title
                        });
                    }

                    window.mapData = markers;
                }
        });

        var gm = google.maps;
            var map = new gm.Map(document.getElementById('map_canvas'), {
                mapTypeId: gm.MapTypeId.TERRAIN,
                center: new gm.LatLng(50.806748, -1.079407), zoom: 12, // whatevs: fitBounds will override
                scrollwheel: false
            });
            var iw = new gm.InfoWindow();
            var oms = new OverlappingMarkerSpiderfier(map,
                    {markersWontMove: true, markersWontHide: true});

            var usualColor = 'eebb22';
            var spiderfiedColor = 'ffee22';
            var iconWithColor = function (color) {
                return 'http://chart.googleapis.com/chart?chst=d_map_xpin_letter&chld=pin|+|' +
                        color + '|000000|ffff00';
            }
            var shadow = new gm.MarkerImage(
                    'https://www.google.com/intl/en_ALL/mapfiles/shadow50.png',
                    new gm.Size(37, 34), // size   - for sprite clipping
                    new gm.Point(0, 0), // origin - ditto
                    new gm.Point(10, 34)  // anchor - where to meet map location
                    );

            oms.addListener('click', function (marker) {
                iw.setContent(marker.desc);
                iw.open(map, marker);
            });
            oms.addListener('spiderfy', function (markers) {
                for (var i = 0; i < markers.length; i++) {
                    markers[i].setIcon(iconWithColor(spiderfiedColor));
                    markers[i].setShadow(null);
                }
                iw.close();
            });
            oms.addListener('unspiderfy', function (markers) {
                for (var i = 0; i < markers.length; i++) {
                    markers[i].setIcon(iconWithColor(usualColor));
                    markers[i].setShadow(shadow);
                }
            });

            var bounds = new gm.LatLngBounds();


            for (var i = 0; i < window.mapData.length; i++) {
                var datum = window.mapData[i];
                var loc = new gm.LatLng(datum.lat, datum.lon);
                bounds.extend(loc);
                var marker = new gm.Marker({
                    position: loc,
                    title: datum.h,
                    map: map,
                    icon: iconWithColor(usualColor),
                    shadow: shadow
                });
                marker.desc = datum.d;
                oms.addMarker(marker);
            }
            //map.fitBounds(bounds);

            // for debugging/exploratory use in console
            window.map = map;
            window.oms = oms;





    }

   </script>

 <div class="col-md-3"><input type="button" value="Search" class="loadAjaxMap" /></div>


<script>
  $( ".loadAjaxMap" ).click(function() {
   loadMapData();
 });
</script>


    <div id="map_canvas"></div>

Answer 1

XmlHttpRequest是异步的。您需要在回调函数可用时使用它。

function loadMapData()
{
  var markers = [];
  $.ajax({
     type: "GET",
     url: "maps2.php",
     success: function(data)
     {
       for (var i = 0; i < data.length; i++)
       {
         markers.push({
           lon: data[i].long,
           lat: data[i].lat,
           h: data[i].city,
           d: data[i].post_title
         });
       }
       window.mapData = markers;
      var gm = google.maps;
      var map = new gm.Map(document.getElementById('map_canvas'), {
          mapTypeId: gm.MapTypeId.TERRAIN,
          center: new gm.LatLng(50.806748, -1.079407), zoom: 12, // whatevs: fitBounds will override
          scrollwheel: false
      });
      var iw = new gm.InfoWindow();
      var oms = new OverlappingMarkerSpiderfier(map,
                {markersWontMove: true, markersWontHide: true});

      var usualColor = 'eebb22';
      var spiderfiedColor = 'ffee22';
      var iconWithColor = function (color) {
          return 'http://chart.googleapis.com/chart?chst=d_map_xpin_letter&chld=pin|+|' +
          color + '|000000|ffff00';
      }
      var shadow = new gm.MarkerImage(
              'https://www.google.com/intl/en_ALL/mapfiles/shadow50.png',
              new gm.Size(37, 34), // size   - for sprite clipping
              new gm.Point(0, 0), // origin - ditto
              new gm.Point(10, 34)  // anchor - where to meet map location
              );
       oms.addListener('click', function (marker) {
          iw.setContent(marker.desc);
          iw.open(map, marker);
      });
      oms.addListener('spiderfy', function (markers) {
         for (var i = 0; i < markers.length; i++) {
             markers[i].setIcon(iconWithColor(spiderfiedColor));
             markers[i].setShadow(null);
         }
         iw.close();
      });
      oms.addListener('unspiderfy', function (markers) {
        for (var i = 0; i < markers.length; i++) {
             markers[i].setIcon(iconWithColor(usualColor));
             markers[i].setShadow(shadow);
        }
      });
      var bounds = new gm.LatLngBounds();
      for (var i = 0; i < window.mapData.length; i++) {
          var datum = window.mapData[i];
          var loc = new gm.LatLng(datum.lat, datum.lon);
          bounds.extend(loc);
          var marker = new gm.Marker({
              position: loc,
              title: datum.h,
              map: map,
              icon: iconWithColor(usualColor),
              shadow: shadow
          });
          marker.desc = datum.d;
          oms.addMarker(marker);
      }
      //map.fitBounds(bounds);
      // for debugging/exploratory use in console
      window.map = map;
      window.oms = oms;
    }
  });
}

Answer 2

您可以尝试只调用loadMapData()函数onClick并完全删除第二个脚本：

<input type="button" value="Search" class="loadAjaxMap" onClick="loadMapData();" />

Google使用Ajax调用地图，为什么我要点击两次？

2 个答案: