Angular-google-maps: Не загружает sebm-google-map-marker с * ngFor | асинхронный

пожалуйста, какие-нибудь обновления по вышеуказанной проблеме?

эй @ krunal039 - можете ли вы проверить, находятся ли <sebm-google-map-marker> в DOM после завершения асинхронной операции? Спасибо!

Привет, Себастьян, я только что обновил свой angular2 до последней версии, и он решил проблему, не уверен, что это был мой плохой код или что-то еще с angular. но это исправлено. Есть ли также возможность установить автоматическое масштабирование на основе всех маркеров?

@ krunal039 нет, сейчас невозможно - извините. пожалуйста, откройте для этого новый выпуск, если вам это нужно. так что мы можем обсудить детали API. Благодарность!

@SebastianM
Я хотел бы снова открыть этот выпуск. Я использую 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 загружается асинхронно через службу. Другие элементы html, использующие *ngFor с центрами в шаблоне, работают правильно. Маркеры для каждого центрального объекта создаются в модели DOM с правильной широтой и долготой, но по какой-то причине они не отображаются на карте.

Я столкнулся с той же проблемой, используя angular.rc4.
Кроме того, если я вручную изменяю размер браузера, мне открывается карта.

@SebastionM У меня такая же проблема на rc4. Маркеры не отображаются на карте. Маркеры отображаются на домике, хотя

такая же проблема здесь. любые решения?

такая же проблема и здесь. на угловом rc3

Наконец-то разберись.
В моем сценарии я получал данные от Http Service, которые поступали в JSON. Я привязывал поля данных lat и lng к циклу for. Это не сработало. Маркеры создавались в DOM, но не отображались на холсте.

Вот как я это понял:

1. Создан интерфейс с именем marker:
   маркер интерфейса {
   лат: число;
   lng: число;
   метка ?: строка;
   перетаскиваемый: логический;
   }
2. Когда мои данные становятся наблюдаемыми, тогда в методе подписки я вызываю другой метод 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)),
error => alert (ошибка),
() => this.pushMarkers () // здесь я вызываю функцию по завершении
);

1. Затем я зациклил свои данные и поместил их в массив маркеров:

this.data.forEach (element => {
this.markers.push ({
lat: Число (element.lat),
lng: Число (element.lng),
метка: element.tag,
перетаскиваемый: ложь
})
console.log ("нажатый" + element.lat + "," + element.lng);
});

Примечание: я понял, что когда данные получены в JSON, они не преобразуются в число, даже если вы сопоставляете JSON с классом (как это сделал я). Но во время Pushing (в функции pushMarker () вы должны явно преобразовать lat / lng в Number ().

Надеюсь, поможет.

@nileshmahant Супер! Мне нужно было явно преобразовать в 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>

Хороший!

Могу я предложить вместо частной функции создать канал для
сделай это. Он выглядел бы намного красивее и портативнее.

Также не намного больше работы.

Я мог бы привести пример, если хотите :-)

1 апреля 2017 года в 02:12 Austin LaRue [email protected] написал:

Я просто столкнулся с этим и подумал, что поделюсь своей работой на случай, если
кто-нибудь еще сталкивается с этим.

В моем ts-файле я добавил простой метод преобразования строки в число:

private convertStringToNumber (значение: строка): number {
возврат + значение;
}

Затем в html я просто передаю широту / долготу этому методу:

[latitude] = "convertStringToNumber (location.latitude)" [longitude] = "
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 неправильный тип объекта (либо неправильный тип, как числовой тип, упомянутый выше, либо что-то, не содержащее lat и long, что был мой случай). Дважды проверьте, что вы отправляете в массив маркеров.

Я хотел бы снова открыть этот вопрос.
Я пытаюсь отобразить заранее определенные маркеры, а также создать маркеры на экране, если пользователь щелкает точку на карте, но при использовании 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