如何获取经纬度坐标？

Question

I have app shows your current location via the lat and lon coordinates and displays on the map. Also in this application has a function display markers denoting sights. These markers I get from api wiki using lat and lon coordinates. But the problem is that the coordinates at the moment are completely static and must be write into the code yourself. How I get lat and lon dynamically from a third-party service? For example, from JSON IP API

Code that is currently responsible for retrieving data

app.factory('places', ['$http', function($http) {

    return $http.jsonp('https://en.wikipedia.org/w/api.php?action=query&list=geosearch&gsradius=5000&gscoord=' + 43.1056 + '%7C' + 131.8735 + '&gslimit=30&format=json&callback=JSON_CALLBACK')
        .success(function(data) {
            return data
        })
        .error(function(err) {
            return err
        })

}])

I tried to make it so

app.factory('places', ['$http', '$scope', function($http, $scope) {

  $scope.coordinates = {};
  $http.get('http://ip-api.com/json')
    .success(function(data) {
      $scope.coordinates.lat = data.lat;
      $scope.coordinates.lon = data.lon;
    });

    return $http.jsonp('https://en.wikipedia.org/w/api.php?action=query&list=geosearch&gsradius=5000&gscoord=' + coordinates.lat + '%7C' + coordinates.lon + '&gslimit=30&format=json&callback=JSON_CALLBACK')
        .success(function(data) {
            return data
        })
        .error(function(err) {
            return err
        })

}])

and

app.factory('places', ['$http', function($http) {

  $http.get('http://ip-api.com/json')
    .success(function(coordinates) {
         return $http.jsonp('https://en.wikipedia.org/w/api.php?action=query&list=geosearch&gsradius=5000&gscoord=' + coordinates.lat + '%7C' + coordinates.lon + '&gslimit=30&format=json&callback=JSON_CALLBACK')
                .success(function(data) {
                    return data
                })
                .error(function(err) {
                    return err
                })
    });

}])

but its not working. Could you help me with this problem? If you need to see the entire code of the application is completely you can download it here https://www.dropbox.com/s/qiu91hhdrc0qy5o/GeoApp.rar?dl=0

Answer 1

You can use HTML5 feature of the browsers and simply write a function to get the current coordinates:

var deferred;

$scope.currentPosition = function() {
    deferred = $q.defer();

    if (window.navigator && window.navigator.geolocation) {
        window.navigator.geolocation.getCurrentPosition(currentPosition, handleErrorOnTrackCurrentPosition);
    } else {
        deferred.reject({msg: "Browser does not supports HTML5 geolocation"});
    }
    return deferred.promise;
};

function currentPosition(position) {
    deferred.resolve({latitude: position.coords.latitude, longitude: position.coords.longitude});
}

function handleError(error) {
    deferred.reject({msg: error.message});
}

Now, when you want to get current coordinates, simply write:

$scope.currentPosition().then(function(data) {
    console.log(data.latitude, data.longitude);
});