javascript – ポップアップの閉じるアイコンのクリック時に関数を呼び出す

[ad_1]

javascript – ポップアップの閉じるアイコンをクリックして関数を呼び出す

尋ねた
今日

見た18回

OSMマップを使用していますリーフレットJS. そのマップで、次のようなポップアップを作成します。

popup.setLatLng(e.latlng).setContent(info).openOn(map);

別の関数を呼び出す方法はありますが、右上隅の閉じるボタンをクリックしてポップアップを閉じた場合のみですか?

尋ねた 4時間前

サンタ

12k

はい、方法はあります。HTML を検査することで、ここに表示される閉じるボタンのクラス名を取得でき、次のコードを記述して、必要なことを行うことができます。

document.getElementsByClassName('leaflet-popup-close-button')[0].onclick = () => {
    //alert("test");
    //write code...
}

ここでのクイックスタートの例の場合： https://leafletjs.com/examples/quick-start/ そうだった leaflet-popup-close-button ライブラリは同じクラスを使用しています。

ありがとう。

答えた 4時間前

ラベルネット

137

これは、たとえば次のように解決できます。

// config map
let config = {
  minZoom: 7,
  maxZoom: 18,
};
// magnification with which the map will start
const zoom = 18;
// co-ordinates
const lat = 52.22977;
const lng = 21.01178;

// calling map
const map = L.map("map", config).setView([lat, lng], zoom);

// Used to load and display tile layers on the map
// Most tile servers require attribution, which you can set under `Layer`
L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
  attribution:
    '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
}).addTo(map);

// one marker
L.marker([52.22983, 21.011728]).addTo(map).bindPopup("Center Warsaw");

function onMapClick(e) {
  const closeButton = e.popup._closeButton;
  closeButton.addEventListener("click", () => {
    alert("ok");
  });

  map.off("popupclose");
}

map.on("popupclose", onMapClick);

*,
:after,
:before {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

html {
  height: 100%;
}

body,
html,
#map {
  width: 100%;
  height: 100%;
}

body {
  position: relative;
  min-height: 100%;
  margin: 0;
  padding: 0;
  background-color: #f1f1f1;
}

<link href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
<div id="map"></div>