Question

到目前为止，我正在创建一个非常基本的Web应用程序。基本上，我只是从mongodb中获取纬度和经度，然后在地图上放置标记，效果很好。我遇到的问题是设置标记颜色。如果将URL放在mongodb中的标记png中，我可以使其工作，但是我想知道是否有一种方法可以基于mongodb中的某些数据来更改标记的颜色。现在，我只是在mongodb文档中使用一个编号为1-4的字段“ marker”，根据该数字将确定标记的颜色。

这是组件。

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？ [sm]：1错误TypeError：无法读取未定义的属性“标记” 在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）在checkAndUpdateDirectiveInline（core.js：22099）在checkAndUpdateNodeInline（core.js：23363）在checkAndUpdateNode（core.js：23325）在debugCheckAndUpdateNode（core.js：23959）在debugCheckDirectivesFn（core.js：23919）在Object.eval [作为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;
      }
  }

设置角度贴图标记

1 个答案: