缩放到点击的特征

Question

I am trying to learn the leaflet library and try to zoom to a clicked feature.我正在尝试学习传单库并尝试缩放到单击的功能。 Might be a simple issue but I am quite new with js and leaflet.可能是一个简单的问题，但我对 js 和传单很陌生。 I have seen examples of how to do this like this post here How to zoom on marker click event in Mapbox Leaflet?我已经看到如何像这篇文章一样执行此操作的示例如何在 Mapbox Leaflet 中放大标记单击事件？ But I dont think that example is getting the data from a ajax call and thus does not work here?但我不认为这个例子是从 ajax 调用中获取数据，因此在这里不起作用？

    function callback (response)    {
        quake = L.geoJson(response,
        {
            onEachFeature: function (feature, layer) 
            {
            layer.bindPopup( "Mag: " + String(feature.properties.mag));
            }
        }).addTo(map);
    map.fitBounds(quake.getBounds());
};


quake.on('click', function(e) {
    map.setView([e.latlng], 12)
});

I have tried this too, but it trow an error that marker is not defined.我也试过这个，但它会引发一个错误，即未定义标记。 But if I understand it correctly L.geoJson will create marker by default and save them to "quake" as my example above that currently does not work.但是，如果我理解正确，L.geoJson 将默认创建标记并将它们保存到“地震”中，如我上面的示例，目前无法正常工作。

marker.on('click', function(e) {
    map.setView([e.latlng], 12)
});

Here is a complete link to my codepen codepen example这是我的 codepen codepen 示例的完整链接

I hope someone can point me in the right direction我希望有人能指出我正确的方向

Answer 1

Very close.很接近。 You just need to add the click handler to the onEachFeature function.您只需要将点击处理程序添加到 onEachFeature 函数。

I have created a working snippet below...我在下面创建了一个工作片段...

 var map = L.map('map').setView([36.235412, -95.800781], 2); var earthquake = document.querySelector(".earth"); earthquake.addEventListener("click", getQuake); L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 19, attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>' }).addTo(map); // Create an empty geoJSON layer to be filled later by button click var quake = L.geoJSON().addTo(map); function getQuake (){ $.ajax( { url:"https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_day.geojson", dataType : 'json', jsonCallback : 'getJson', success : callback } ) }; function callback (response) { quake = L.geoJson(response, { onEachFeature: function (feature, layer) { layer.bindPopup( "Mag: " + String(feature.properties.mag)); layer.on('click', function (e) { map.setView(e.latlng, 12) }); } }).addTo(map); map.fitBounds(quake.getBounds()); };

 #map { height: 350px; width: 650px; margin:auto; } #earthquake{ margin-left: 420px; margin-bottom: 10px; } #about { text-align: center; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.2.0/leaflet.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.2.0/leaflet.css" rel="stylesheet"/> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Leaflet Demo</title> </head> <body> <div id="about"> <h1>Leaflet Map Demo Template</h1> <p>Data from dayly M2.5+ Earthquakes <em><strong>https://earthquake.usgs.gov</em></strong></p> </div> <div id="earthquake"> <button class="earth">Add Earthquake data</button></id> </div> <div id="map"></div> </body> </html>

缩放到点击的特征

问题描述

1 个解决方案

解决方案1
1 已采纳 2017-10-16 10:55:06

缩放到点击的特征

问题描述

1 个解决方案

解决方案1 1 已采纳 2017-10-16 10:55:06

解决方案1
1 已采纳 2017-10-16 10:55:06