Question

使用传单制作可以显示路线/标记的地图。我正在尝试使用json文件动态添加标记。我确信我的服务运行正常，因为可以在console.log中看到这些标记的值，并且还可以在html组件中打印它们。该数组在console.log中显示该值，但是标记无法获取该值，并显示无法读取属性的错误。硬编码标记可以完美工作，但由于某种原因会读取json的arent。请帮忙！我尝试将代码添加到ngOninit中，但会产生更多错误，并且不会加载地图。 component.ts文件代码：

    import { Component, OnInit } from '@angular/core';
    import { icon, latLng, Map, marker, point, polyline, tileLayer, Marker, 
    Polyline } from 'leaflet';
    import { MarkersService } from '../../markers.service';


@Component({
  selector: 'app-map',
  templateUrl: './map.component.html',
  styleUrls: ['./map.component.css'],
  providers: [MarkersService]
})
export class MapComponent implements OnInit {
  markers = [];
  tryy = 33.682321;
  tryy2 = 73.058726;
streetMaps = tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', 
{
  detectRetina: true
  });
  wMaps = tileLayer('http://maps.wikimedia.org/osm-intl/{z}/{x}/{y}.png', {
  detectRetina: true
  });

  start = marker([this.markers[0]['StartLat'], this.markers[0]['StartLng']], 
{
    icon: icon({
      iconSize: [25, 41],
      iconAnchor: [13, 41],
      iconUrl: 'leaflet/marker-icon.png',
      shadowUrl: 'leaflet/marker-shadow.png'
    })
  });

  end = marker([24.913922, 67.315837], {
    icon: icon({
      iconSize: [25, 41],
      iconAnchor: [13, 41],
      iconUrl: 'leaflet/marker-icon.png',
      shadowUrl: 'leaflet/marker-shadow.png'
    })
  });

   route = polyline([[33.682321, 73.058726], [33.384651, 72.865306], 
[33.270229, 72.807763], [32.943536, 72.708223],
     [32.606673, 72.842360], [32.288203, 73.000890], [31.972039, 73.112601], 
[31.883114, 73.336906],
    [31.601536, 73.149888], [31.425529, 72.789089], [30.956571, 72.477178], 
[30.716659, 72.641768],
    [30.495370, 72.420331], [30.285221, 71.952136], [29.945930, 71.772164], 
[29.602745, 71.683494],
    [29.344185, 71.421998], [29.087987, 71.095766], [28.857044, 70.595844], 
[28.430086, 70.157344],
    [28.156929, 69.685327], [27.904275, 69.220365], [27.551740, 68.929500], 
[27.205054, 68.405422],
    [26.525050, 67.991266], [26.291247, 68.115831], [25.981719, 68.152846], 
[25.708132, 68.297451],
     [25.342394, 68.171898], [25.099355, 67.709424], [24.913922, 
67.315837]]);


  layersControl = {
  baseLayers: {
    'Street Maps': this.streetMaps,
    'Wikimedia Maps': this.wMaps
  },
  overlays: {
    'Starting Position': this.start,
    'Ending Position': this.end,
    'Route': this.route
  }
  };
  options = {
    layers: [this.streetMaps, this.route, this.start, this.end],
  zoom: 3,
  center: latLng([25.342394, 68.171898])
   };

  constructor(private markersservice: MarkersService) { }
  ngOnInit() {

this.markersservice.getMarkers().subscribe(
  responseMark => {
    this.markers = responseMark;
    console.log(JSON.stringify(this.markers));
    console.log(this.markers[0]['StartLat']);
  }
);
  }

onMapReady(map: Map) {
map.fitBounds(this.route.getBounds(), {
  padding: point(24, 24),
  maxZoom: 12,
  animate: true
});
  }
}

component.html文件代码：

<div class="map"
  leaflet
  (leafletMapReady)="onMapReady($event)"
  [leafletOptions]="options"
  [leafletLayersControl]="layersControl">
</div>

单张地图动态标记的角度

0 个答案: