전단지 사용자 위치 마커 실시간 업데이트 방법

Question

전단지에서 사용자 위치를 업데이트하려고합니다. 사용자가 휴대 전화를 사용할 때와 마찬가지로 위치 마커도 Google지도처럼 위치 데이터를 기반으로 이동합니다.

는 지금 그들의 초기 위치

this.map.locate({ 
    setView: true, 
    maxZoom: 120 
}).on("locationfound", e => { 

    leaflet.marker([e.latitude, e.longitude]).bindPopup("YOU ARE HERE!").addTo(this.map); 



    console.log("lokasyon bulundu"); 
}).on("locationerror", error => { 

    console.log("lokasyon bulunamadi"); 
}); 

시도 갱신() 메소드에 마커를 넣어하지만 일하러 내가 모든 두 번째 사용자의 위치 데이터를해야하고 다른 한 다음 새로 만들기를 그리면 생각하게 couldnt는 메신저 마커를 제거하고 오래된 것을 제거 하시겠습니까? 이것이 효과적인 방법입니까?

감사합니다. 편집 이것은 답변을 기반으로 시도한 것입니다. 그 결정 사용자 정의 마커

this.map.locate({ 
    setView: true, 
    maxZoom: 120, 
    watch:true, 
    enableHighAccuracy:true 
    }).on("locationfound", e => { 
     if (!usermarker) { 

     if(this.profileData.avatar == "https://i.hizliresim.com/zJJ239.png"){ 
      usermarker = new L.marker(e.latlng,{icon : ayi}).addTo(this.map); 
     }else if(this.profileData.avatar == "https://i.hizliresim.com/mJJrkP.png"){ 
      usermarker = new L.marker(e.latlng,{icon : ironman}).addTo(this.map); 
     }else if(this.profileData.avatar == "https://i.hizliresim.com/vJJQpp.png"){ 
      usermarker = new L.marker(e.latlng,{icon : dino}).addTo(this.map); 
     }else if(this.profileData.avatar == "https://i.hizliresim.com/zJJ2B9.png"){ 
      usermarker = new L.marker(e.latlng,{icon : petyr}).addTo(this.map); 
     } 
     } else if(this.profileData.avatar == "https://i.hizliresim.com/zJJ239.png") { 
      usermarker.setLatLng(e.latlng); 
     } 
    }).on("locationerror", error => { 
     if (usermarker) { 
      map.removeLayer(usermarker); 
      usermarker = undefined; 
     } 
    }); 

Answer 1

기반으로 당겨 working.im하지 DB에서 데이터를 그냥 생성 된 마커가있는 경우를 작성하지, 그렇지 않으면 확인 L.Marker의 setLatLng 방법을 사용하여 업데이트 :

을

마커 위치를 지정된 점으로 변경합니다.

참조 : http://leafletjs.com/reference-1.2.0.html#marker-setlatlng

예 :의 대답에 대한

var marker; 

this.map.locate({ 
    setView: true, 
    maxZoom: 120 
}).on("locationfound", e => { 
    if (!marker) { 
     marker = new L.marker(e.latlng).addTo(this.map); 
    } else { 
     marker.setLatLng(e.latlng); 
    } 
}).on("locationerror", error => { 
    if (marker) { 
     map.removeLayer(marker); 
     marker = undefined; 
    } 
});