放大點擊功能

我正在嘗試學習傳單庫並嘗試縮放到單擊的功能。可能是一個簡單的問題，但我對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

放大點擊功能

回答

相關問題