Question

我们有一个包含企业列表的页面。有一个标有“map”的按钮。当用户点击它时，我们出现了一个Jquery对话窗口，我们在该窗口中出现了一个Mapbox地图，其中有一个标记指示了企业的位置。

问题是标记没有被清除，所以第三次用户点击“地图”按钮时，地图上有3个标记。

我们想知道

如何正确清除所有标记的地图和
如何将地图置于标记中心

我们正在使用以下内容：

初始化地图

var map = L.mapbox.map('map', 'our-map')
     .setView([49.2500, -123.1000], 9);

当用户点击按钮时，会将标记添加到地图中：

jQuery('.map-button').click(function(){              
    //jQuery(this.addClass("active"));
    var lat = jQuery(this).attr('data-lat');
    var long = jQuery(this).attr('data-long');
    var markerLayers = L.mapbox.markerLayer({
        // 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: [long, lat ]
        },
        properties: {
            title: 'A Single Marker',
            description: 'Just one of me',
            // one can customize markers by adding simplestyle properties
            // http://mapbox.com/developers/simplestyle/
            'marker-size': 'large',
            'marker-color': '#008000'
        }
    }).addTo(map);




 UPDATED CODE

    <script>
                var markerLayer = L.mapbox.markerLayer({ 
    type: 'FeatureCollection', 
    features: { 
    } 
    }).addTo(map); 
                  jQuery('.map-button').click(function(){

                    //jQuery(this.addClass("active"));
                    var lat = jQuery(this).attr('data-lat');
                    var long = jQuery(this).attr('data-long');


                 var geojson = [
     {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [long,lat]
      },
      "properties": {

        "marker-color": "#008000",
        "marker-size": "large",

      }
      }
     ];
      markerLayer.setGeoJSON(geojson);
      map.setView([long, lat ], 9);

                //map.setView([long, lat ], 9);
                    //alert(jQuery(this).attr('data-lat'));
                    })

                       jQuery('#dialog-modal').live("dialogclose", function(){
      //jQuery('.leaflet-marker-icon').hide();

      markerLayer.clearLayers();
      });

Answer 1

设置地图的中心：

map.setView([long, lat ], 9);

清除图层中的标记：

markerLayers.clearLayers();

初始化地图，添加标记然后清除标记的最简单方法是什么？

1 个答案: