Листовка: как изменить центр карты и уровень масштабирования, нажимая на circleMarker?

Question

Я работаю над картой с несколькими кругами. Когда пользователь нажимает на один из этих меток circle, я хотел бы центрировать карту на этом кругеMarker и увеличивать масштаб. Он работает, когда я пытаюсь использовать это на многополигонных слоях, но мне не удалось добиться успеха в circleMarkers. Кто-нибудь может мне помочь?

Вот код для моего circleMarkers:

<script> 


    var map = L.map('map', { 
     center: [41.8, 12.5], 
     zoom: 5, 
     zoomControl:true, maxZoom:15, minZoom:4, 
     }); 
var feature_group = new L.featureGroup([]); 
var raster_group = new L.LayerGroup([]); 

var basemap = L.tileLayer('http://server.arcgisonline.com/ArcGIS/rest/services/World_Shaded_Relief/MapServer/tile/{z}/{y}/{x}', { 
attribution: 'Tiles &copy; Esri &mdash; Source: Esri', 
}); 
basemap.addTo(map); 


    function style1(feature) { 
     return { 
      weight: 2, 
      radius: 10, 
      opacity: 1, 
      color: 'black', 
      weight: 1, 
      fillOpacity: 1, 
      fillColor: 'red' 
     }; 
    }        

    L.geoJson(villes, { 
     style: style1, 
     pointToLayer: function (feature, latlng) 
      { 
       return L.circleMarker(latlng).bindLabel(feature.properties.Name, {className: "ville", noHide: true }); 

      }   
      } 
    ) 

          .addTo(map) 
          .showLabel; 


</script>. 

Here является ссылка на полную карту.

спасибо.

Answer 1

Этого можно добиться действительно просто. Предположим, что указывает на маркер вашего рекламного листка и map на карту вашего брошюры.

Быстрый путь (рекомендуется)

marker.on("click", function(event) { 
    map.setView(marker.getLatLng(), 16); 
}, marker); 

Вот, я даже не вычислить необходимый уровень масштабирования, потому что я предполагаю, что листовка придется увеличить до уровня макс в любом случае.

Я мог бы также добавить свой маркер в L.LayerGroup, даже если основная точка LayerGroup состоит в группировании нескольких маркеров.

Во всяком случае, более точный способ

marker.on("click", function(event) { 
    map.setView(marker.getLatLng(), map.getBoundsZoom(layerGroup.getBounds()); 
}, marker); 

Обратите внимание, что быстрый способ будет сделать это красиво тоже. Второе решение может показаться более точным, но оно также медленнее и подразумевает использование LayerGroup, которое не так, как оно было разработано для работы (создайте новую группу слоев для каждого маркера).

Не забудьте взять время на чтение docs, это хорошо спроектировано и довольно легко понять.

Answer 2

Я нашел решение:

function onClick(e) {map.setView(this.getLatLng(),15);} 

    L.geoJson(villes, { 
     style: style1, 
     pointToLayer: function (feature, latlng) 
      { 
       return L.circleMarker(latlng).bindLabel(feature.properties.Name, {className: "ville", noHide: true }).on('click', onClick); 

      }   
      } 
    ) 
          .addTo(zoom1) 
          .showLabel; 

Спасибо Многожильных Малышей за вашу помощь.