2017-11-05 11 views
2

나는 ionic3 앱을 만들고지도 기능을 위해 리플릿을 사용하고 있습니다. 그러나 나는 이상한 행동을 만났다. 페이지가로드 된 후 GPS가 켜지면 위치가 자동으로 가져옵니다. 더 정확한 위치를 찾기 위해 주어진 마커를 움직일 수 있습니다. 이 후 "Locate me"버튼을 클릭하면 마커가 제거되지만 위치를 가져 오면 다시 가져와 두 개의 마커가 현재 위치에 추가됩니다. 마치 마커가지도에서 제거되었지만 마커 배열에서는 제거되지 않았습니다. "Locate me"를 클릭 할 때마다 추가 마커가 생기므로 두 번째 클릭 후 총 3 개의 마커가 표시됩니다.전단지지도 이중 마커 발행

"찾기"버튼은 locate() 기능을 호출합니다. 모든 도움이 많이 appreaciated됩니다

presentAlert() { 
    let alert = this.alertCtrl.create({ 
     title: 'GPS hiba', 
     subTitle: 'Kérem kapcsolja be a GPS vevőt a helyzete meghatározásához!', 
     buttons: [ 
     { 
      text: 'Ok', 
      role: 'cancel', 
      handler:() => { 

      } 
     } 
     ] 
    }); 
    alert.present(); 
    } 

    ionViewDidLoad() { 
    this.getMap(); 
    } 

    getMap() { 
    this.map = leaflet.map("map"); 
    leaflet.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { 
     attributions: '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>', 
     minZoom: 6 
    }).addTo(this.map); 

    this.map.bounds = []; 

    this.map.fitBounds([ 
     [45.636684, 16.030223], 
     [48.708459, 22.863228] 
    ]); 

    this.map.setMaxBounds([ 
     [45.636684, 16.030223], 
     [48.708459, 22.863228] 
    ]); 

    this.locate(); 
    } 

    locate() { 
    this.map.locate({ 
     setView: true, 
     maxZoom: 10, 
     enableHighAccuracy: true 
    }); 

    let marker; 

    this.map.on('locationfound', (e) => { 

     if (marker && this.map.hasLayer(marker)) { 
     this.map.removeLayer(marker); 
     } 

     let lat = e.latitude; 
     let lng = e.longitude; 

     marker = new leaflet.marker([e.latitude, e.longitude], {draggable: 'true'}); 

     marker.on('dragend', function (event) { 
     marker = event.target; 
     let position = marker.getLatLng(); 

     lat = position.lat; 
     lng = position.lng; 

     marker.setLatLng(new leaflet.LatLng(position.lat, position.lng), {draggable: 'true'}); 
     }); 
     this.map.addLayer(marker); 
    }); 

    this.map.on('locationerror', (err) => { 
     this.presentAlert(); 
    }) 
    } 

: 여기

내가 사용하고있는 코드입니다. 감사합니다, 귀하의 marker 변수가 당신의 locate 방법 내부 를 범위가

답변

3

트릭스.

따라서 새 메서드는 해당 메서드를 호출 할 때마다 만들어집니다.

당신이 제공 한 코드를 제거 할 수있는 방법 확실하지 ...

당신은 한 번에 하나 개의 위치 마커를 갖고 싶어해야

, 당신은 예를 들어, 대신 인스턴스 속성을 사용할 수 있습니다 this.marker

인스턴스에 범위가 지정되며 locate을 호출 할 때마다 동일한 참조가 다시 사용됩니다.

+0

그래, 내가 처음 시작했지만 원래 그때 didnt 일을 ideea했다. 이제 마법 같은 작품, 재미 :) 도와 줘서 고마워. 건배! – trix87