与传单保持联系

Question

我有一个 DC.JSc 图表，它正在过滤我的传单地图上的图标。基本上，当我进行过滤时，我希望我的地图能够放大我选择的图标。

var onFilt = function(chart, filter) {
  updateMap(locations.top(Infinity));
};

// Updates the displayed map markers to reflect the crossfilter dimension passed in
var updateMap = function(locs) {
  // clear the existing markers from the map
  markersLayer.clearLayers();
  clusterLayer.clearLayers();

  locs.forEach(function(d, i) {

    if (d.latitude != null && d.latitude != undefined) {
      // add a Leaflet marker for the lat lng and insert the application's stated purpose in popup

      var mark = L.marker([d.latitude, d.longitude]);
      markersLayer.addLayer(mark);
      clusterLayer.addLayer(mark);

      map.getBounds();
    }
  });
};

我试过了：

map.getBounds(); //No response

L.markersLayer.getBounds(); //SCRIPT5007: Unable to get property 'getBounds' of undefined or null reference

map.fitBounds(markersLayer.getBounds()); // Object doesn't support property or method 'getBounds'

还尝试过：

if (d.latitude != null && d.latitude != undefined) {
  d.ll = L.latLng(d.latitude, d.longitude);
  var mark = L.marker([d.latitude, d.longitude]);
  markersLayer.addLayer(mark);
  clusterLayer.addLayer(mark);
};
map.addLayer(markersLayer);
map.fitBounds(markersLayer.getBounds());
});

错误：对象不支持属性或方法“getBounds”

有任何想法吗？

找到了我自己的解决方案：map.fitBounds(clusterLayer.getBounds());

Answer 1

你已经快到了，但有几个错误：你试图在循环getBounds内forEach，你试图getBounds从错误的对象开始。

\n

请查看并运行下面的代码片段，单击FILTER按钮，阅读JS代码中的注释。

\n

我省略了过滤部分，仅左侧缩放：

\n

\r\n

\r\n

// add a map\nvar map = L.map(\'mapid\').setView([51.505, -0.09], 12);\nL.tileLayer(\'https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw\', {\n        maxZoom: 18,\n        attribution: \'Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, \' +\n            \'Imagery \xc2\xa9 <a href="https://www.mapbox.com/">Mapbox</a>\',\n        id: \'mapbox/streets-v11\',\n        tileSize: 512,\n        zoomOffset: -1\n    }).addTo(map);\n\n// Assuming that locations are filtered already:\nvar locations = [\n  {latitude: 51.5, longitude: -0.09},\n  {latitude: 51.53, longitude: -0.19},\n  {latitude: 51.45, longitude: 0},\n  {latitude: 51.56, longitude: 0.09}\n];\n\n// Updates the displayed map markers to reflect the crossfilter dimension passed in\nvar updateMap = function(locs) {\n  // clear the existing markers from the map\n  //markersLayer.clearLayers();\n  //clusterLayer.clearLayers();\n  \n  var minlat = 200, minlon = 200, maxlat = -200, maxlon = -200;\n  \n  locs.forEach(function(d, i) {\n\n    if (d.latitude != null && d.latitude != undefined) {\n      // add a Leaflet marker for the lat lng and insert the application\'s stated purpose in popup\\\n      //var mark = L.marker([d.latitude, d.longitude]);\n      //markersLayer.addLayer(mark);\n      //clusterLayer.addLayer(mark);\n      \n      // find corners\n      if (minlat > d.latitude) minlat = d.latitude;\n      if (minlon > d.longitude) minlon = d.longitude;\n      if (maxlat < d.latitude) maxlat = d.latitude;\n      if (maxlon < d.longitude) maxlon = d.longitude;\n      \n      // set markers\n      L.marker([d.latitude, d.longitude]).addTo(map);\n    }\n  });\n  \n  c1 = L.latLng(minlat, minlon);\n  c2 = L.latLng(maxlat, maxlon);\n\n  // fit bounds\n  map.fitBounds(L.latLngBounds(c1, c2));\n  \n  // correct zoom to fit markers\n  setTimeout(function() {\n    map.setZoom(map.getZoom() - 1);\n  }, 500);\n\n};\n\nfunction filtr() {\n  updateMap(locations);\n};

\r\n

#mapid {\n  height: 180px;\n}

\r\n

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.4/dist/leaflet.css" integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA==" crossorigin="" />\n\n<script src="https://unpkg.com/leaflet@1.3.4/dist/leaflet.js" integrity="sha512-nMMmRyTVoLYqjP9hrbed9S+FzjZHW5gY1TWCHA5ckwXZBadntCNs8kEqAWdrb9O7rxbCaA4lKTIWjDXZxflOcA==" crossorigin=""></script>\n\n<button onclick="filtr()">FILTER</button>\n\n<div id="mapid"></div>

\r\n

\r\n

\r\n

\n