放大点击功能

我正在尝试学习传单库并尝试缩放到单击的功能。可能是一个简单的问题，但我对js和传单很新。我见过如何做到这一点的例子，就像这篇文章How to zoom on marker click event in Mapbox Leaflet? 但我不认为这个例子是从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) 
});

我也试过这个，但它抛出一个错误，标记没有定义。但是，如果我理解正确，L.geoJson将默认创建标记，并将它们保存为“quake”，如上面的示例，目前不起作用。

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

这里是我的codepen codepen example

一个完整的链接我希望有人能指出我在正确的方向

来源

2017-10-16 geogrow

非常接近。您只需将click处理程序添加到onEachFeature函数。

我创建了下文一个工作片断......

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', { 
 
\t maxZoom: 19, 
 
\t 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( 
 
\t { 
 
\t url:"https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_day.geojson", 
 
\t dataType : 'json', 
 
\t jsonCallback : 'getJson', 
 
\t success : callback 
 
\t } 
 
\t \t) 
 
}; 
 

 
function callback (response) \t { 
 
\t \t quake = L.geoJson(response, 
 
\t \t { 
 
\t \t \t onEachFeature: function (feature, layer) 
 
\t \t \t { 
 
     \t layer.bindPopup("Mag: " + String(feature.properties.mag)); 
 
     
 
      layer.on('click', function (e) { 
 
       map.setView(e.latlng, 12) 
 
      }); 
 
    \t \t \t } 
 
\t \t }).addTo(map); 
 
    \t 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>

来源

2017-10-16 10:55:06 RedCrusador

谢谢！这正如我所希望的那样工作。我实际上试图把处理程序放在forEach函数中，但我把它放在标记上而不是图层上。所以我想，当你从ajax的geoJSON工作，你所有的交互式代码与该层需要在forEach方法？ – geogrow

您已经添加了一个图层，因此它需要定位图层而不是标记。是的数据如果返回asnc，将需要在函数的成功部分。 – RedCrusador

放大点击功能

回答

相关问题