需要删除javascript中的标记&；带有Mapbox的Ajax_Javascript_Ajax_Mapbox

需要删除javascript中的标记&；带有Mapbox的Ajax

javascript ajax mapbox

需要删除javascript中的标记&；带有Mapbox的Ajax,javascript,ajax,mapbox,Javascript,Ajax,Mapbox,当我在地图上移动时，我试图移除地图上不居中的标记。我认为这与Ajax的异步方面有关 <!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title>A simple map</title> <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalab

当我在地图上移动时，我试图移除地图上不居中的标记。我认为这与Ajax的异步方面有关

<!DOCTYPE html>
<html>
  <head>
    <meta charset=utf-8 />
    <title>A simple map</title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script src='https://api.tiles.mapbox.com/mapbox.js/v2.1.9/mapbox.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox.js/v2.1.9/mapbox.css' rel='stylesheet' />
    <style>
      body { margin:0; padding:0; }
      #map { position:absolute; top:0; bottom:0; width:100%; }
    </style>
  </head>
  <body>
    <div id='map'></div>
    <script>
      L.mapbox.accessToken = 'pk.eyJ1IjoiYmxhY2t5IiwiYSI6IjA4NWJjZDNiNDQ0MTg3YjVmZTNkM2NkMWQ3MmM4ZjU4In0.SDQh56AZPCbIL2rVs4eAkQ';
      var map = L.mapbox.map('map', 'mapbox.streets').setView([47, 2], 6);
      var markerGroup;

      map.on('moveend', function(move) {

        var coordinates = map.getCenter();

        markerGroup.clearLayers; //doesn't work.

            $.ajax({
              type: 'GET',
              url: 'http://private-anon-0b8fcf12d-cartoemploi.apiary-mock.com/geosearch/'+ coordinates.lat + ',' + coordinates.lng,
              crossDomain: true,
              dataType: 'json',
              contentType: "application/json",
              success: function(response) {
                $.each(response, function(i) {  
                  title = response[i].title;              
                  latitude = response[i].latitude;
                  longitude = response[i].longitude;

                  markerGroup = L.mapbox.featureLayer({

                  // this feature is in the GeoJSON format: see geojson.org
                  // for the full specification
                    type: 'Feature',
                    geometry: {
                        type: 'Point',
                        // coordinates here are in longitude, latitude order because
                        // x, y is the standard for GeoJSON and many formats
                        coordinates: [
                          longitude,
                          latitude
                        ]
                    },
                    properties: {
                        title: title,
                        description : '',
                        // one can customize markers by adding simplestyle properties
                        // https://www.mapbox.com/guides/an-open-platform/#simplestyle
                        'marker-size': 'large',
                        'marker-color': '#ffa5ff',
                        'marker-symbol': 'suitcase'
                    }
                  }).addTo(map);
                });
              }
            });
      });

      ... some code
    </script>
  </body>
</html>

但是这会删除整个地图，这不是我想要的。

我发现了我的错误。我创造了太多的标记。我将标记放在全局变量markerGroup的数组中

var markerGroup = [];

我创建了一个函数来清空我的markerGroup

function clearMarkers() {
    markerGroup.forEach(function(marker) {
        marker.clearLayers();
    });

    markerGroup = [];
  }

完整代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset=utf-8 />
    <title>A simple map</title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <script src='https://api.tiles.mapbox.com/mapbox.js/v2.1.9/mapbox.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox.js/v2.1.9/mapbox.css' rel='stylesheet' />
    <style>
      body { margin:0; padding:0; }
      #map { position:absolute; top:0; bottom:0; width:100%; }
    </style>
  </head>
  <body>
    <div id='map'></div>
    <input id='search' class='search-ui' placeholder='' />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src='https://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-omnivore/v0.2.0/leaflet-omnivore.min.js'></script>
    <script>
      L.mapbox.accessToken = 'pk.eyJ1IjoiYmxhY2t5IiwiYSI6IjA4NWJjZDNiNDQ0MTg3YjVmZTNkM2NkMWQ3MmM4ZjU4In0.SDQh56AZPCbIL2rVs4eAkQ';
      var map = L.mapbox.map('map', 'mapbox.streets').setView([47, 2], 6);

      var markerGroup = [];

      function clearMarkers() {
        markerGroup.forEach(function(marker) {
            marker.clearLayers();
        });

        markerGroup = [];
      }

      map.on('moveend', function(move) {

        var coordinates = map.getCenter();
        console.log(coordinates.lat)
        console.log(coordinates.lng)


            $.ajax({
              type: 'GET',
              url: 'http://private-anon-0b8fcf12d-cartoemploi.apiary-mock.com/geosearch/'+ coordinates.lat + ',' + coordinates.lng,
              crossDomain: true,
              dataType: 'json',
              contentType: "application/json",
              success: function(response) {
                clearMarkers();
                $.each(response, function(i) {  
                  title = response[i].title;              
                  latitude = response[i].latitude;
                  longitude = response[i].longitude;

                  markerGroup.push(L.mapbox.featureLayer({

                  // this feature is in the GeoJSON format: see geojson.org
                  // for the full specification
                    type: 'Feature',
                    geometry: {
                        type: 'Point',
                        // coordinates here are in longitude, latitude order because
                        // x, y is the standard for GeoJSON and many formats
                        coordinates: [
                          longitude,
                          latitude
                        ]
                    },
                    properties: {
                        title: title,
                        description : '',
                        // one can customize markers by adding simplestyle properties
                        // https://www.mapbox.com/guides/an-open-platform/#simplestyle
                        'marker-size': 'large',
                        'marker-color': '#ffa5ff',
                        'marker-symbol': 'suitcase'
                    }
                  }).addTo(map));
                });
              }
            });
      });

      $(document).ready(function() {
        $.ajax({
          type: 'GET',
          url: 'http://private-anon-0b8fcf12d-cartoemploi.apiary-mock.com/emploi/',
          crossDomain: true,
          dataType: 'json',
          contentType: "application/json",
          success: function(response) {
            clearMarkers();
            $.each(response, function(i) {  
              title = response[i].title;              
              latitude = response[i].latitude;
              longitude = response[i].longitude

              markerGroup.push(L.mapbox.featureLayer({

              // this feature is in the GeoJSON format: see geojson.org
              // for the full specification
                type: 'Feature',
                geometry: {
                    type: 'Point',
                    // coordinates here are in longitude, latitude order because
                    // x, y is the standard for GeoJSON and many formats
                    coordinates: [
                      longitude,
                      latitude
                    ]
                },
                properties: {
                    title: title,
                    description : '',
                    // one can customize markers by adding simplestyle properties
                    // https://www.mapbox.com/guides/an-open-platform/#simplestyle
                    'marker-size': 'large',
                    'marker-color': '#ffa500',
                    'marker-symbol': 'suitcase'
                }
              }).addTo(map));
            });
          }
        });
      });
    </script>

  </body>
</html>


简单的地图
正文{margin:0；padding:0；}
#映射{位置：绝对；顶部：0；底部：0；宽度：100%；}
L.mapbox.accessToken='pk.eyj1ijoiymxhy2t5iiii6ija4nwjjzdindq0mtg3yjvmztnkm2nkmqmmm4zju4in0.SDQh56AZPCbIL2rVs4eAkQ'；
var map=L.mapbox.map（'map'，'mapbox.streets'）.setView（[47,2]，6）；
var markerGroup=[]；
函数clearMarkers（）{
markerGroup.forEach（函数（marker）{
marker.clearLayers（）；
});
markerGroup=[]；
}
map.on（'moveend'，函数（move）{
var坐标=map.getCenter（）；
console.log（coordinates.lat）
控制台日志（coordinates.lng）
$.ajax({
键入：“GET”，
网址：'http://private-anon-0b8fcf12d-cartoemploi.apiary-mock.com/geosearch/“+coordinates.lat+”，“+coordinates.lng，
跨域：是的，
数据类型：“json”，
contentType:“应用程序/json”，
成功：功能（响应）{
clearMarkers（）；
$.each（响应，函数（i）{
title=响应[i]。title；
纬度=响应[i]。纬度；
经度=响应[i]。经度；
markerGroup.push（L.mapbox.featureLayer({
//此功能采用GeoJSON格式：请参阅GeoJSON.org
//对于完整的规格
键入：“功能”，
几何图形：{
键入：“点”，
//这里的坐标是经度，纬度的顺序，因为
//x，y是GeoJSON和许多格式的标准
坐标：[
经度
纬度
]
},
特性：{
标题:标题,，
说明：“”，
//可以通过添加simplestyle属性来自定义标记
// https://www.mapbox.com/guides/an-open-platform/#simplestyle
“标记大小”：“大”，
“标记颜色”：“ffa5ff”，
“标记符号”：“行李箱”
}
}).addTo（map））；
});
}
});
});
$（文档）.ready（函数（）{
$.ajax({
键入：“GET”，
网址：'http://private-anon-0b8fcf12d-cartoemploi.apiary-mock.com/emploi/',
跨域：是的，
数据类型：“json”，
contentType:“应用程序/json”，
成功：功能（响应）{
clearMarkers（）；
$.each（响应，函数（i）{
title=响应[i]。title；
纬度=响应[i]。纬度；
经度=响应[i]。经度
markerGroup.push（L.mapbox.featureLayer({
//此功能采用GeoJSON格式：请参阅GeoJSON.org
//对于完整的规格
键入：“功能”，
几何图形：{
键入：“点”，
//这里的坐标是经度，纬度的顺序，因为
//x，y是GeoJSON和许多格式的标准
坐标：[
经度
纬度
]
},
特性：{
标题:标题,，
说明：“”，
//可以通过添加simplestyle属性来自定义标记
// https://www.mapbox.com/guides/an-open-platform/#simplestyle
“标记大小”：“大”，
“标记颜色”：“ffa500”，
“标记符号”：“行李箱”
}
}).addTo（map））；
});
}
});
});

<!DOCTYPE html>
<html>
  <head>
    <meta charset=utf-8 />
    <title>A simple map</title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <script src='https://api.tiles.mapbox.com/mapbox.js/v2.1.9/mapbox.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox.js/v2.1.9/mapbox.css' rel='stylesheet' />
    <style>
      body { margin:0; padding:0; }
      #map { position:absolute; top:0; bottom:0; width:100%; }
    </style>
  </head>
  <body>
    <div id='map'></div>
    <input id='search' class='search-ui' placeholder='' />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src='https://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-omnivore/v0.2.0/leaflet-omnivore.min.js'></script>
    <script>
      L.mapbox.accessToken = 'pk.eyJ1IjoiYmxhY2t5IiwiYSI6IjA4NWJjZDNiNDQ0MTg3YjVmZTNkM2NkMWQ3MmM4ZjU4In0.SDQh56AZPCbIL2rVs4eAkQ';
      var map = L.mapbox.map('map', 'mapbox.streets').setView([47, 2], 6);

      var markerGroup = [];

      function clearMarkers() {
        markerGroup.forEach(function(marker) {
            marker.clearLayers();
        });

        markerGroup = [];
      }

      map.on('moveend', function(move) {

        var coordinates = map.getCenter();
        console.log(coordinates.lat)
        console.log(coordinates.lng)


            $.ajax({
              type: 'GET',
              url: 'http://private-anon-0b8fcf12d-cartoemploi.apiary-mock.com/geosearch/'+ coordinates.lat + ',' + coordinates.lng,
              crossDomain: true,
              dataType: 'json',
              contentType: "application/json",
              success: function(response) {
                clearMarkers();
                $.each(response, function(i) {  
                  title = response[i].title;              
                  latitude = response[i].latitude;
                  longitude = response[i].longitude;

                  markerGroup.push(L.mapbox.featureLayer({

                  // this feature is in the GeoJSON format: see geojson.org
                  // for the full specification
                    type: 'Feature',
                    geometry: {
                        type: 'Point',
                        // coordinates here are in longitude, latitude order because
                        // x, y is the standard for GeoJSON and many formats
                        coordinates: [
                          longitude,
                          latitude
                        ]
                    },
                    properties: {
                        title: title,
                        description : '',
                        // one can customize markers by adding simplestyle properties
                        // https://www.mapbox.com/guides/an-open-platform/#simplestyle
                        'marker-size': 'large',
                        'marker-color': '#ffa5ff',
                        'marker-symbol': 'suitcase'
                    }
                  }).addTo(map));
                });
              }
            });
      });

      $(document).ready(function() {
        $.ajax({
          type: 'GET',
          url: 'http://private-anon-0b8fcf12d-cartoemploi.apiary-mock.com/emploi/',
          crossDomain: true,
          dataType: 'json',
          contentType: "application/json",
          success: function(response) {
            clearMarkers();
            $.each(response, function(i) {  
              title = response[i].title;              
              latitude = response[i].latitude;
              longitude = response[i].longitude

              markerGroup.push(L.mapbox.featureLayer({

              // this feature is in the GeoJSON format: see geojson.org
              // for the full specification
                type: 'Feature',
                geometry: {
                    type: 'Point',
                    // coordinates here are in longitude, latitude order because
                    // x, y is the standard for GeoJSON and many formats
                    coordinates: [
                      longitude,
                      latitude
                    ]
                },
                properties: {
                    title: title,
                    description : '',
                    // one can customize markers by adding simplestyle properties
                    // https://www.mapbox.com/guides/an-open-platform/#simplestyle
                    'marker-size': 'large',
                    'marker-color': '#ffa500',
                    'marker-symbol': 'suitcase'
                }
              }).addTo(map));
            });
          }
        });
      });
    </script>

  </body>
</html>