사건

이하의 실장이라고 load 이벤트가 잘 발화하지 않는다! ?

이 구현은 이벤트가 발화하지 않습니다.

  var map = L.map('map').setView([51.505, -0.09], 13);
  L.tileLayer('https://api.mapbox.com/styles/v1/k-nakamura/ciujeilwt003u2jqn47v2ozcs/tiles/256/{z}/{x}/{y}?access_token=pk.eyJ1Ijoiay1uYWthbXVyYSIsImEiOiJjaXVqZWd6OTMwMGhjMnlxaXZrcGhzczJtIn0.LQwDcl6aZFQRx8dPfneFHQ', {
    attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://mapbox.com">Mapbox</a>',
    maxZoom: 18
  }).addTo(map);

  map.on('load', function() {
    alert('The map load event is fired');
  });

확인 페이지

원인 : load 이벤트의 문서를 볼 수 있습니다.

Fired when the map is initialized (when its center and zoom are set for the first time).

그래서 위도 경도와 줌을 처음 설정한 타이밍에 발화한다.
위의 코드에서는 초기화 메소드로 건네주고 있으므로 load 이벤트 콜백을 건네줄 타이밍이 없다.

해결: 이벤트를 설정한 후 .setView()

이벤트가 발화

  var map = L.map('map');
  L.tileLayer('https://api.mapbox.com/styles/v1/k-nakamura/ciujeilwt003u2jqn47v2ozcs/tiles/256/{z}/{x}/{y}?access_token=pk.eyJ1Ijoiay1uYWthbXVyYSIsImEiOiJjaXVqZWd6OTMwMGhjMnlxaXZrcGhzczJtIn0.LQwDcl6aZFQRx8dPfneFHQ', {
    attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://mapbox.com">Mapbox</a>',
    maxZoom: 18
  }).addTo(map);

  map.on('load', function() {
    alert('The map load event is fired');
  });

  map.setView([51.505, -0.09], 13);

확인 페이지

그래도 발화하지 않으면

또 다른 원인이라고 생각합니다

Reference

이 문제에 관하여(Leaflet에서 map.on('load')이 발화되지 않는 경우 처방전), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/kozy4324/items/0f3622b9d9bc1c95c8fe

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다