Установка угловых маркеров карты

Question

Сейчас я создаю довольно простое веб-приложение. По сути, я просто беру лат и лонг из моего mongodb и помещаю маркеры на карту, которая работает нормально. У меня проблема с настройкой цвета маркера. Я могу заставить его работать, если поместить URL-адрес маркера png в mongodb, но мне было интересно, есть ли способ изменить цвет маркера на основе определенных данных из mongodb. Прямо сейчас, я просто использую поле «маркер» в моем документе mongodb с номером 1 - 4, основываясь на этом числе, чтобы определить, какой цвет у маркера.

Вот компонент.ts

import { Component, OnInit } from '@angular/core';
import { SchoolService } from '../school.service';
import { School } from '../School';

@Component({
  selector: 'app-map',
  templateUrl: './map.component.html',
  styleUrls: ['./map.component.css']
 })

export class MapComponent implements OnInit {

  startLat = 35.782169;
  startLng = -80.793457;
  zoom = 7;
  greenMarker = 
 'http://www.google.com/intl/en_us/mapfiles/ms/micons/green-dot.png';
  yellowMarker = 
 'http://www.google.com/intl/en_us/mapfiles/ms/micons/yellow-dot.png';

  schools: School[] = [];

  constructor(private schoolService: SchoolService) { }

  ngOnInit() {
    this.getSchools();
    this.getIcon();
  }

  getSchools(): void {
    this.schoolService.getSchools()
      .subscribe((schoolList: School[]) => {
        this.schools = schoolList;
        console.log(this.schools);
      });
  }

  getIcon() {
    for (let i = 0; i <= this.schools.length; i++) {
      if (this.schools[i].marker === 1) {
       return this.greenMarker;
      } else {
        return this.yellowMarker;
      }
    }
  }
}

Вот HTML

 <div class="container">

  <ul class="legend">
    <li><span class="faster"></span>IPv6 Load Time &le; IPv4</li>
    <li><span class="all-elements"></span>Fully IPv6 Accessible</li>
    <li><span class="reachable"></span>DNS AAA Record</li>
    <li><span class="DNS-AAAA"></span>Not IPv6 Accessible</li>
  </ul>

  <agm-map id="map" [latitude]="startLat" [zoom]="zoom" 
[longitude]="startLng">
    <agm-marker *ngFor="let school of schools; let i = index"
      [latitude]="school.lat" [longitude]="school.long" 
[iconUrl]="getIcon()">
      <agm-info-window>
        <h4>{{ school.name }}</h4>
        <p>lat: {{ school.lat }}</p>
        <p>long: {{ school.long }}</p>
      </agm-info-window>
    </agm-marker>
  </agm-map>
</div>

School.ts

export class School {
    name: string;
    lat: number;
    long: number;
    marker: number;
}

schoolService.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class SchoolService {


  constructor(private http: HttpClient) { }

  getSchools() {
    return this.http.get('http://localhost:3000/get');
  }
}

Вот текущий журнал ... MapComponent_Host.ngfactory.js? [см]: 1 ОШИБКА TypeError: Невозможно прочитать свойство 'marker' неопределенного на MapComponent.push ../ src / app / map / map.component.ts.MapComponent.getIcon (map.component.ts: 38) в MapComponent.push ../ src / app / map / map.component.ts.MapComponent.ngOnInit (map.component.ts: 25) at checkAndUpdateDirectiveInline (core.js: 22099) at checkAndUpdateNodeInline (core.js: 23363) в checkAndUpdateNode (core.js: 23325) at debugCheckAndUpdateNode (core.js: 23959) at debugCheckDirectivesFn (core.js: 23919) в Object.eval [as updateDirectives] (MapComponent_Host.ngfactory.js? [sm]: 1)

Answer 1

Проблема в шаблоне, где вы пытаетесь вызвать "getIcon ()". Этот метод может быть вызван даже до завершения подписки.

Пожалуйста, измените ваш шаблон и код компонента следующим образом -

<agm-map id="map" [latitude]="startLat" [zoom]="zoom" 
[longitude]="startLng">
    <agm-marker *ngFor="let school of schools; let i = index"
      [latitude]="school.lat" [longitude]="school.long" 
[iconUrl]="getIcon(school)">
      <agm-info-window>
        <h4>{{ school.name }}</h4>
        <p>lat: {{ school.lat }}</p>
        <p>long: {{ school.long }}</p>
      </agm-info-window>
    </agm-marker>
  </agm-map>

getIcon(school) {

if(school) {
  if(school.marker === 1) {
  return this.greenMarker;
      } else {
        return this.yellowMarker;
      }
  }