Question

我有一个使用传单库的角度应用程序，我想在其中单击地图并将坐标保存到BD中。

为此，我有一个map.component.ts，在其中获取坐标并将其传递给service.ts，但是在service.ts中，我收到了一个空对象。

import { Component, OnInit } from '@angular/core';
import { FeaturesService } from '../../services/feature.service'
import { Vertex } from '../../models/vertex'

declare let L;

var lat;
var lng;
var coordinatesObj: Vertex;
var map;

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

  constructor(private _vertexService: FeaturesService) {}

  ngOnInit() {

    map = L.map('map').setView([40.4893538, -3.6827461], 13);


    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
      attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(map);

  }


  getCoordinates() {
    map.addEventListener('click', function(ev) {
      lat = ev.latlng.lat;
      lng = ev.latlng.lng;

      coordinatesObj = {
        "lat": lat,
        "lng": lng
      };


    })
    this.sendCoords(coordinatesObj);
  }

  sendCoords(coordinatesObj) {

    this._vertexService.registerVertex(coordinatesObj).subscribe(

      response => {
        if (!response) {
          console.log('there is no response')
        } else {

          console.log(response)
        }
      },
      error => {
        let errorMessage = < any > error;
        if (errorMessage !== null) {
          let body = JSON.parse(error._body);
          console.log('error:' + body);
        }
      }
    );
  }
}

我在做什么错？变量lat和long在map.addEventListenerEvent外部声明，因此可以通过任何方法访问。

Answer 1

您的getCoordinates函数错误。您不必等待实际的点击事件被触发，而是向coordinatesObj函数发送空的sendCoords。

相反，您应该注册点击处理程序，并仅在事件处理程序被调用后发送坐标。

map.addEventListener('click', function(ev) {
  lat = ev.latlng.lat;
  lng = ev.latlng.lng;

  coordinatesObj = {
    "lat": lat,
    "lng": lng
  };

  // This part is important! Now the sendCoords will only be called after the use clicked on the map.
  this.sendCoords(coordinatesObj);
});

我建议您在ngOnInit函数中注册点击处理程序。 getCoordinates函数可能会变得很完善，但是我不能肯定地说不见HTML。

Answer 2

您的问题在于尝试调用getCoordinates方法，该方法仅注册单击侦听器，然后将空对象发送到sendCoords方法。根据使用情况，我宁愿将行this.sendCoords(coordinatesObj)移到addEventListern并在单击后始终执行。

旁注：恕我直言，最好利用角度模式并创建一个单独的服务来传递坐标Obj，而不是在组件外部声明变量。

为什么不将坐标设置到对象中？

2 个答案: