Click to clicked features

リーフレットのライブラリを学び、クリックした機能をズームしようとしています。簡単な問題かもしれませんが、私はjsとリーフレットでかなり新しいです。ここでこの投稿のようにこれを行う方法の例を見たHow to zoom on marker click event in Mapbox Leaflet? しかし、私はその例は、ajax呼び出しからデータを取得しているとは思わないので、ここで動作しないのですか？Click to clicked features

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はデフォルトでマーカーを作成し、上の例のように現在は機能しませんので、それらを「震え」に保存します。

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

は、ここで私は誰かが

出典

2017-10-16 geogrow

非常に近い正しい方向に私を指すことを願って、私のcodepen codepen example

への完全なリンクです。 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関数の中にハンドラを置こうとしましたが、レイヤの代わりにマーカーに置きました。それで、あなたは、その層のすべてのインタラクティブなコードがforEachメソッドの中にある必要があるという、ajaxのgeoJSONを使って作業すると思いますか？ – geogrow

マーカーをレイヤーに追加する必要があります。データがasncで返された場合は、関数の成功部分内にある必要があります。 – RedCrusador

答えて

関連する問題