leaflet.js 마커의 팝업 위에 마우스를 추가하려면 어떻게해야합니까? 팝업 데이터는 동적입니다.
지도에 표시 할 위도 및 경도 위치를 반환하는 서비스가 있습니다.
마커 위에 마우스를 올리면 팝업이 필요합니다. 이벤트는 예의 위도 및 경도 위치를 http://api.openweathermap.org/data/2.5/weather?lat=40&lon=-100으로 보내야합니다. 서비스의 데이터는 팝업 콘텐츠에 있어야합니다. 시도했지만 각 마커의 팝업 콘텐츠를 동적으로 만들 수 없습니다.
필요한 것을하십시오.
아래는 마커에 사용한 코드입니다 .statedata는 위도 및 경도 값을 저장하는 배열입니다.
for ( var i=0; i < totalLength1; i++ ) {
var LamMarker = new L.marker([statesData1[i].KK, statesData1[i].LL]).on('contextmenu',function(e) {
onClick(this, i);
}).on('click',function(e) {
onClick1(this, i)
});
marker_a1.push(LamMarker);
map.addLayer(marker_a1[i]);
클릭하면 마커 컨텍스트에서 click1 함수를 호출합니다.
위 코드에서 위도 및 경도를 전달하는 위에 마우스 팝을 추가하려면 어떻게해야합니까?
마커에 팝업을 연결하는 것은 매우 쉽습니다. 인스턴스 의 bindPopup메서드를 호출하여 수행됩니다 L.Marker. , 기본적으로 팝업이 열립니다 click의 이벤트 L.Marker인스턴스와에 종료 click당신의 이벤트 L.Map인스턴스입니다. 이제 팝업이 열릴 때 무언가를하고 싶다면 인스턴스 의 popupopen이벤트를 수신 할 수 있습니다 L.Map.
popupopen일반적으로 XHR / AJAX를 통해 수행 되는 이벤트 에 대해 백그라운드에서 외부 데이터를 가져 오려는 경우. 자신의 논리를 작성하거나 .NET과 같은 jQuery의 XHR / AJAX 메서드와 같은 것을 사용할 수 있습니다 $.getJSON. 응답 데이터를 받으면 팝업 내용을 업데이트 할 수 있습니다.
추가 설명을위한 주석이있는 코드 :
// A new marker
var marker = new L.Marker([40.7127, -74.0059]).addTo(map);
// Bind popup with content
marker.bindPopup('No data yet, please wait...');
// Listen for the popupopen event on the map
map.on('popupopen', function(event){
// Grab the latitude and longitude from the popup
var ll = event.popup.getLatLng();
// Create url to use for getting the data
var url = 'http://api.openweathermap.org/data/2.5/weather?lat='+ll.lat+'&lon='+ll.lng;
// Fetch the data with the created url
$.getJSON(url, function(response){
// Use response data to update the popup's content
event.popup.setContent('Temperature: ' + response.main.temp);
});
});
// Listen for the popupclose event on the map
map.on('popupclose', function(event){
// Restore previous content
event.popup.setContent('No data yet, please wait...');
});
다음은 Plunker에서 작동하는 예제입니다. http://plnkr.co/edit/oq7RO5?p=preview
댓글 후 :
클릭하는 대신 마우스 오버시 팝업을 열려면 다음을 추가 할 수 있습니다.
marker.on('mouseover', function(event){
marker.openPopup();
});
지도 대신 호버링을 중지 할 때 팝업을 닫으려면 다음을 클릭하십시오.
marker.on('mouseout', function(event){
marker.closePopup();
});
다음은 업데이트 된 예입니다. http://plnkr.co/edit/wlPV4F?p=preview
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다