Reverse Geocoding Using Angular 2

Question

I use reverse geocoding with Angular 2, it works fine, but I can not set values ​​(like city name) using a service (setter and receiver)

import { ShareService } from './services/ShareService'; class ConferenceApp { constructor(public shareService: ShareService){ this.getGeoLocation(); } public getGeoLocation(){ if (navigator.geolocation) { var options = { enableHighAccuracy: true }; navigator.geolocation.getCurrentPosition(position=> { this.lat = position.coords.latitude; this.long = position.coords.longitude; let geocoder = new google.maps.Geocoder(); let latlng = new google.maps.LatLng(this.lat, this.long); let request = { latLng: latlng }; geocoder.geocode(request, function(results, status) { if (status == google.maps.GeocoderStatus.OK) { if (results[0] != null) { let city = results[0].address_components[results[0].address_components.length-4].short_name; this.shareService.setLocationDetails(city); } else { alert("No address available"); } } }); }, error => { console.log(error); }, options); } } } 

if I try to install using the service, this.shareService.setLocationDetails (city); I get an error message

 app.ts:303 Uncaught TypeError: Cannot read property 'shareService' of undefined 

Service:

 locationObj: any; setLocationDetails(locationObj){ this.locationObj = locationObj; } getLocationDetails(){ return this.locationObj; } 

Answer 1

I think that everything is in order. But I would suggest you use arrowfunction ()=> as below,

 // Removed function keyword and added arrow function geocoder.geocode(request, (results, status) => { if (status == google.maps.GeocoderStatus.OK) { if (results[0] != null) { let city = results[0].address_components[results[0] .address_components.length-4].short_name; this.shareService.setLocationDetails(city); } else { alert("No address available"); } } }); 

Answer 2

geocoder.geocode (request, (results, status) => {....} found an error in ' results ', saying that {'latLng': latlng} does not match the type of results.

Decision:

  var geocoder = new google.maps.Geocoder(); var latlng = new google.maps.LatLng(this.eventLat, this.eventLng); let request = { location: latlng }; geocoder.geocode(request, function (results, status) { if (status == google.maps.GeocoderStatus.OK) { if (results[1]) { console.log(results[1].formatted_address); } else { console.log('Location not found'); } } else { console.log('Geocoder failed due to: ' + status); } }); 

Answer 3

I do not have enough reputation to comment :-( so I will answer the question of Usman Iqbal as an answer. Maybe some administrators can convert this into a comment.

Implicit callback functions create a structure called closure: an object containing the real function, as well as the context of its creation. This context contains all the variables surrounding the callback, as well as their values ​​at the time the function was created. A closure does not contain this context because it is an object itself and has its own this at the time the callback is executed.

To make this from the creation context directly accessible, the arrow functions, by definition, process this , which is not closing this , but this creating context. Without arrow functions, you can achieve the same thing by explicitly copying the surrounding this into the closure context:

 let self = this; // this of the creation context geocoder.geocode(request, function (results, status) { if (status == google.maps.GeocoderStatus.OK) { if (results[0] != null) { ... // access the surrounding this via self self.shareService.setLocationDetails(city); } ... } });