Question

我尝试从geolocation.getCurrentLocation捕获Lat和Long数据，但我无法保存它们。这是一个功能，而不是返回号码。我用lat和lng来保存它们并得到这个错误。错误TypeError：无法设置属性＆＃39; lat＆＃39;为null

请帮我解决这个问题。

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
    public constructor( private geo: GeoDataService, private tags: TagService) { }
    title = 'Select a tag:';
    latt =0;
    lngg = 0;
    zoomlv = 18;
    lat = 1;
    lng = 1;

    iconUrl = 'http://maps.google.com/mapfiles/dir_0.png';
    a : Array<any>;
    polylines: Array<any>;
    markers = new Array();
    mapClicked($event: MouseEvent) {
        console.log('Clicked the map at longitude: ' + $event.coords.lng + ', latitude: ' + $event.coords.lat); 
    }

    ngOnInit(): void {
        }

            var options = {
            enableHighAccuracy: true,
            timeout: 5000,
            maximumAge: 0
          };

          function success(pos) {
            var crd = pos.coords;

            console.log('Your current position is:');
            console.log(`Latitude : ${crd.latitude}`);
            console.log(`Longitude: ${crd.longitude}`);
            console.log(`More or less ${crd.accuracy} meters.`);
            this.lat = crd.latitude;
            this.lng = crd.longitude;
          }

          function error(err) {
            console.warn(`ERROR(${err.code}): ${err.message}`);
          }

          navigator.geolocation.getCurrentPosition(success, error, options);



    }

}

Answer 1

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
    public constructor( private geo: GeoDataService, private tags: TagService) { }
    title = 'Select a tag:';
    latt =0;
    lngg = 0;
    zoomlv = 18;
    lat = 1;
    lng = 1;

    iconUrl = 'http://maps.google.com/mapfiles/dir_0.png';
    a : Array<any>;
    polylines: Array<any>;
    markers = new Array();
    mapClicked($event: MouseEvent) {
        console.log('Clicked the map at longitude: ' + $event.coords.lng + ', latitude: ' + $event.coords.lat); 
    }

    ngOnInit(): void {
        }

            var options = {
            enableHighAccuracy: true,
            timeout: 5000,
            maximumAge: 0
          };

          let success = (pos) => { <--------- use arrow function 
            var crd = pos.coords;

            console.log('Your current position is:');
            console.log(`Latitude : ${crd.latitude}`);
            console.log(`Longitude: ${crd.longitude}`);
            console.log(`More or less ${crd.accuracy} meters.`);
            this.lat = crd.latitude;
            this.lng = crd.longitude;
          }

          let error = (err) => { <-------- you can use arrow function here as well 
            console.warn(`ERROR(${err.code}): ${err.message}`);
          }

          navigator.geolocation.getCurrentPosition(success, error, options);



    }

}

使用箭头功能而不是使用函数表达式

在函数表达式this中引用在createObject内创建的对象。在the箭头功能案例中，这指的是this本身的createObject。

如果您需要访问当前环境的this

，这会使箭头功能变得有用

Answer 2

let that = this;
function success(pos) {
  var crd = pos.coords;
  console.log('Your current position is:');
  console.log(`Latitude : ${crd.latitude}`);
  console.log(`Longitude: ${crd.longitude}`);
  console.log(`More or less ${crd.accuracy} meters.`);
  that.lat = crd.latitude;
  that.lng = crd.longitude;
}

你的错误是this，它引用了当前的功能范围，成功函数没有lat或lng这就是为什么

尝试更改app.component.ts

2 个答案: