Javascript 传单填充不起作用

我正在开发一个小的传单应用程序，不能像我预期的那样使用“填充”。在下面的代码中，在click处理程序中，我有一行代码：

mymap.fitBounds(myLayer.getBounds(), {padding: [1000, 1000]})

我认为应该在myLayer.getBounds（）获得的边界上添加一个填充，然后贴图应该根据边界和填充缩放到适当的级别。但是，我看不出是否传入padding选项有什么区别。我也没有看到改变填充数字的区别。 当前发生的情况是，当用户单击由点表示的元素时，地图将基于“maxZoom”值放大该点。因此，例如，如果他们单击奥克兰，地图将根据“maxZoom”显示标记周围的区域；“padding”选项不起任何作用

JS代码

//instantiate map
var mymap = L.map('mapid').setView([39.8283, -98.5795], 3);

//apply layer
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?
  access_token={accessToken}', {
  attribution: 'Map data &copy; <a 
  href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a 
  href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, 
  Imagery © 
  <a href="http://mapbox.com">Mapbox</a>',
  maxZoom: 18,
  id: 'mapbox.streets',
  accessToken: 'all-your-tokens-are-belong-to-me'
}).addTo(mymap);

//cities for markers
var locations ={
  boston: {"type": "Point", "coordinates": [-71.05977, 42.35843]},
  oakland: {"type": "Point", "coordinates": [-122.2708, 37.80437]},
  berkeley: {"type": "Point", "coordinates": [-122.2737, 37.8712]},
  london: {"type": "Polygon", "coordinates": [[[-0.08, 51.509], [-0.06, 
  51.503], [-0.047, 51.51]]]},
  dublin: {"type": "Polygon", "coordinates": [[ [-6.2890, 53.3439], 
  [-6.2653, 
  53.3435], [-6.2603, 53.3356], [-6.2936, 53.3320] ]]},
  glasgow: {"type": "Point", "coordinates": [-4.2435, 55.8627]}
};

//define styles
var myStyle = {
  "color": "#ff7800",
  "weight": 5,
  "opacity": 0.65
};

//Create geoJson layer
var myLayer = L.geoJSON(null, {style: myStyle}).addTo(mymap);

//function to add element to geoJson layer
function updateMap(object) {
  myLayer.addData(object);
};

//click on the location's button, add it to the map
$('button').click(function(){
  var region = locations[this.id]
  updateMap(region);
  regionTypeContainer.push(region.type);
  mymap.fitBounds(myLayer.getBounds(), {padding: [1000, 1000]}); // padding 
  //not doing anything
});

//实例化映射
var mymap=L.map（'mapid'）.setView（[39.8283，-98.5795]，3）；
//应用层
L.tileLayer（'https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png？
access_token={accessToken}'{
属性：'映射数据©；贡献者，
图像（
',
maxZoom:18，
id:“地图盒。街道”，
accessToken:“您所有的代币都属于我”
}).addTo（mymap）；
//标记城市
变量位置={
波士顿：{“类型”：“点”，“坐标”：[-71.05977,42.35843]}，
奥克兰：{“类型”：“点”，“坐标”：[-122.2708,37.80437]}，
伯克利：{“类型”：“点”，“坐标”：[-122.2737,37.8712]}，
伦敦：{“类型”：“多边形”，“坐标”：[[-0.08,51.509]，[-0.06，
51.503], [-0.047, 51.51]]]},
都柏林：{“类型”：“多边形”，“坐标”：[[-6.2890,53.3439]，
[-6.2653, 
53.3435], [-6.2603, 53.3356], [-6.2936, 53.3320] ]]},
格拉斯哥：{“类型”：“点”，“坐标”：[-4.2435,55.8627]}
};
//定义样式
var myStyle={
“颜色”：“ff7800”，
“重量”：5，
“不透明度”：0.65
};
//创建geoJson层
var myLayer=L.geoJSON（null，{style:myStyle}）.addTo（mymap）；
//函数将元素添加到geoJson层
函数更新映射（对象）{
myLayer.addData（对象）；
};
//单击该位置的按钮，将其添加到地图中
$（“按钮”）。单击（函数（）{
var region=位置[this.id]
更新地图（区域）；
regionTypeContainer.push（region.type）；
mymap.fitBounds（myLayer.getBounds（），{padding:[10001000]}）；//padding
//什么也不做
});

方法的

fitBounds（）

选项用于从

fitBounds

计算中排除贴图视口的某些部分

如您所述，如果尝试将

fitBounds

缩放到一个点（即，您的GeoJSON图层组包含一个单点功能），此

padding

选项将不会改变任何内容，即您仍然会缩放到

maxZoom

，因为实际上没有适合的区域

一个非常简单的解决方法是检测

getBounds

返回“空”区域的情况：

bounds.getSouthWest（）.equals（bounds.getNorthwest（））

在这种情况下，您可以改为使用

mymap.panTo（bounds.getCenter（））

，例如，这样贴图将保持当前的缩放级别

var-bounds=myLayer.getBounds（）；
如果（bounds.getSouthWest（）.equals（bounds.getNorthwest（）））{
//只能查看单点要素。
panTo（bounds.getCenter（））；
}否则{
//一些适合边界的区域。
mymap.fitbunds（bounds）；
}

演示：