Angular-google-maps: * ngFor |와 함께 sebm-google-map-marker를로드하지 않습니다. 비동기

위의 문제에 대한 업데이트가 있습니까?

hey @ krunal039- 비동기 작업이 완료된 후 <sebm-google-map-marker> 이 DOM에 있는지 확인할 수 있습니까? 감사!

안녕하세요 Sebastian, 방금 angular2를 최신으로 업데이트했으며 잘못된 코드인지 또는 앵귤러인지 확실하지 않은 문제를 해결했습니다. 하지만 고정되어 있습니다. 모든 마커를 기반으로 줌 자동을 설정하는 옵션도 있습니까?

@ krunal039 아니요, 지금은 불가능합니다-죄송합니다. 필요한 경우 새 문제를여십시오. API 세부 사항에 대해 논의 할 수 있습니다. 감사!

뿡 빵뀨
이 호를 다시 열고 싶습니다. 나는 angular2 rc.4 (지금까지 가장 최근의 angular2 릴리스)를 사용하고 있으며이 문제에 직면 해 있습니다. 마커가 DOM에로드되지만지도 캔버스에 표시되지 않습니다.

  <sebm-google-map 
      [latitude]="map_focus_lat"
      [longitude]="map_focus_lng"
      [zoom]="11">

    <sebm-google-map-marker *ngFor="let center of centers" 
    [latitude]="center.latitude" 
    [longitude]="center.longitude">
    </sebm-google-map-marker>
  </sebm-google-map>

centers 는 위도 및 경도 매개 변수가있는 각 객체의 객체 배열입니다. centers 는 서비스를 통해 비동기 적으로로드됩니다. 템플릿의 중앙에 *ngFor 를 사용하는 다른 html 요소가 올바르게 작동합니다. 각 중심 객체의 마커는 정확한 위도와 경도를 사용하여 DOM에서 생성되지만 어떤 이유로지도에 표시되지 않습니다.

angular.rc4를 사용하여 동일한 문제에 직면하고 있습니다.
또한 브라우저 크기를 수동으로 조정하면지도가 표시됩니다.

@SebastionM rc4 에서 같은 문제가 있습니다. 마커가지도에 표시되지 않습니다. 마커는 돔에 표시되지만

여기에 같은 문제. 어떤 해결책?

여기에서도 같은 문제입니다. 각도 rc3

마지막으로 알아 내십시오.
내 시나리오에서는 JSON으로 제공되는 Http 서비스에서 데이터를 얻었습니다. for 루프에서 해당 데이터의 lat 및 lng 필드를 바인딩했습니다. 작동하지 않았습니다. 마커가 DOM에서 생성되었지만 캔버스에 표시되지 않았습니다.

이것이 내가 그것을 알아 낸 방법입니다.

1. marker라는 인터페이스를 만들었습니다.
   인터페이스 마커 {
   위도 : 숫자;
   lng : 숫자;
   레이블? : 문자열;
   드래그 가능 : 부울;
   }
2. 내 데이터가 관찰 가능 해지면 subscribe 메서드에서 데이터가 완전히 페치되면 다른 메서드 pushMarker ()를 호출합니다.

this.observable = this.gisDataService.getEntities (dcode);
this.observable.subscribe (
data => this.data = data.map ((entity : Entity) => new Entity (entity.uid, entity.alpha, entity.lat, entity.lng, entity.type, entity.tag, entity.addr, entity .desc, entity.zcode, entity.rcode, entity.dcode)),
오류 => 경고 (오류),
() => this.pushMarkers () // 끝에 함수를 호출하는 곳입니다.
);

1. 그런 다음 데이터를 반복하여 마커 배열에 넣었습니다.

this.data.forEach (element => {
this.markers.push ({
lat : Number (element.lat),
lng : Number (element.lng),
label : element.tag,
draggable : false
})
console.log ( "pushed"+ element.lat + ","+ element.lng);
});

참고 : JSON으로 데이터를받을 때 JSON을 클래스에 매핑하더라도 숫자로 변환되지 않는다는 것을 알아 냈습니다. 그러나 Pushing (pushMarker () 함수에서 명시 적으로 lat / lng를 Number ()로 변환해야합니다.)

도움이 되었기를 바랍니다.

트윗 담아 가기 Number ()로 명시 적으로 변환해야했습니다. 감사합니다 :)

감사합니다 @nileshmahant 가 내 문제를 해결했습니다!

변환 된 값을 제공하는 대신 구성 요소에서 변환을 가져 오기 위해이 항목을 다시 열고 싶습니다.

나를 위해 +1, 이것을 알아내는 데 시간이 걸렸고 JSON에서 마커를로드하는 사용 사례는 매우 논리적입니다.

나는 방금 이것을 만났고 다른 누군가가 그것에 부딪 힐 경우를 대비하여 내 작업을 공유 할 것이라고 생각했습니다.

내 ts 파일에서 문자열을 숫자로 변환하는 간단한 방법을 추가했습니다.

private convertStringToNumber(value: string): number {
        return +value;
    }

그런 다음 html에서 위도 / 경도를이 메서드에 전달합니다.

<sebm-google-map-marker *ngFor="let location of clientLocations" [latitude]="convertStringToNumber(location.latitude)" [longitude]="convertStringToNumber(location.longitude)"></sebm-google-map-marker>

좋은!

개인 기능 대신에 파이프를 생성하지 않는 것이 좋습니다.
이 작업을 수행. 훨씬 더 멋지고 휴대 가능해 보일 것입니다.

또한 더 많은 일이 없습니다.

원하는 경우 예제를 제공 할 수 있습니다. :-)

2017 년 4 월 1 일 02:12에 Austin LaRue [email protected] 은 다음과 같이 썼습니다.

나는 방금 이것을 만났고 만일을 대비하여 내 작업을 공유 할 것이라고 생각했습니다.
다른 사람이 그것에 부딪칩니다.

내 ts 파일에서 문자열을 숫자로 변환하는 간단한 방법을 추가했습니다.

개인 convertStringToNumber (값 : 문자열) : 숫자 {
반환 + 값;
}

그런 다음 html에서 위도 / 경도를이 메서드에 전달합니다.

[latitude] = "convertStringToNumber (location.latitude)"[경도] = "
convertStringToNumber (location.longitude) ">

—
이 스레드를 구독했기 때문에이 메시지가 전송되었습니다.
이 이메일에 직접 답장하고 GitHub에서 확인하세요.
https://github.com/SebastianM/angular2-google-maps/issues/330#issuecomment-290757110 ,
또는 스레드 음소거
https://github.com/notifications/unsubscribe-auth/AY4FmON0vwkqtvbC3qlBK1E6SQQQsAr2ks5rrSXggaJpZM4IaCkp
.

와우 나는이 문제를 발견하기 전에 한 시간 이상이 문제에 대해 머리를 치고있었습니다. 이것은 나를 위해 완벽하게 작동했습니다.)

일반적으로 내 경험에 따르면 agm 마커가 DOM에 표시되지만 표시되지 않는 경우 ngFor에 잘못된 개체 유형을 제공했을 수 있습니다 (위에서 언급 한 숫자 유형과 같은 부적절한 유형 또는 위도 및 경도를 전혀 포함하지 않는 유형). 내 경우였다). 마커 배열로 보내는 내용을 다시 확인하십시오.

이 문제를 다시 열고 싶습니다.
사용자가지도의 한 지점을 클릭하면 미리 정의 된 마커를 표시하고 화면에 마커를 생성하려고하지만 ngfor를 사용하면 마커가지도에 표시되지 않습니다.
내 HTML 파일에는

<sebm-google-map
          [latitude]="lat"
          [longitude]="lng"
          [zoom]="zoom"
          [disableDefaultUI]= false
          [zoomControl]= true
          (mapClick)="mapClicked($event)">

          <sebm-google-map-marker
            *ngFor="let m of markers; let i = index"
            (markerClick)="clickedMarker(m,i)"
            [latitude]="convertStringToNumber(m.lat)"
            [longitude]="convertStringToNumber(m.lng)"
            [markerDraggable]="m.draggable"
            (dragEnd)="markerDragEnd(m, $event)"
          >

            <sebm-google-map-info-window>
              <strong>{{m.name}}</strong>
            </sebm-google-map-info-window>
          </sebm-google-map-marker>
        </sebm-google-map>

내 service.ts 파일에 마커를 추가하고 표시하려면

  getMarkers(){
    var markers = JSON.parse(localStorage.getItem('markers'));
    return markers;
  }

  addMarker(newMarker){
    //fetch marker that are already there
    var markers = JSON.parse(localStorage.getItem('markers'));

    // Push to array
    markers.push(newMarker);

    //set markers again
    localStorage.setItem('markers',JSON.stringify(markers))
  }

저도 lat 및 long 값을 string 개체로 저장했기 때문에 다음과 같이 DecimalPipe 내장 된 것을 사용해야했습니다.

... *ngFor="let pin of pins" [latitude]="pin.lat|number:'1.0-8'" ...

공식 문서 : https://angular.io/api/common/DecimalPipe