javascript - 单击按钮时传单缩放至属性

Question

Leaflet 新手，需要大量帮助。我希望能够单击一个按钮，它将缩放到我的 map 上的一个属性。例如议会选区。假设我点击了议会区 2 的按钮，我想放大到该区并突出显示它。这在传单中怎么可能呢？到目前为止我所拥有的就是这个:

<div class="push-top">
    <button class="cc-bttn"  onclick="buttonClick('bttn1')">CC 1</button>
    <button class="cc-bttn"  onclick="buttonClick('bttn2')">CC 2</button>
    <button class="cc-bttn"  onclick="buttonClick('bttn3')">CC 3</button>
    <button class="cc-bttn"  onclick="buttonClick('bttn4')">CC 4</button>
</div>


<script>
function buttonClick(str){
  alert(str)
}

这会创建一个弹出框，而不是我正在寻找的。

谢谢!

Answer 1

您可以创建标记数组，然后通过名称获取带有经纬度的标记，然后将 map 平移到经纬度。

var markers =  [];
markers['bttn1'] = L.marker([lat,lng]).addTo(map);
markers['bttn2'] = L.marker([lat,lng]).addTo(map);
markers['bttn3'] = L.marker([lat,lng]).addTo(map);

var zoom = 15;
function buttonClick(str){
  var marker = markers[str];
  var latlng = marker.getLatLng();
  map.flyTo(latlng,zoom)
}