个人中心
gpt4 book ai didi

javascript - AngularJS，传单。如何从第三方服务动态获取纬度和经度坐标？

转载 作者：塔克拉玛干 更新时间：2023-11-02 21:29:34 27 4
gpt4 key购买 nike

我有一个简单的应用程序，它通过纬度和经度坐标显示您的当前位置并显示在 map 上。但目前它是静态的，必须手动指定坐标。应用完整代码:

  1. index.html

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
        <link rel="stylesheet" type="text/css" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" />
        <link rel="stylesheet" type="text/css" href="css/main.css">
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-leaflet-directive/0.10.0/angular-leaflet-directive.min.js"></script>
        <script src="https://code.angularjs.org/1.2.28/angular-route.min.js"></script>
        <script src="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script>
    </head>
        <body ng-app="NearMeApp">

            <div class="header">
                <div class="container-fluid">
                    <h1 class="pull-left">NearMe</h1>
                    <a class="pull-right" href="#/about">About</a>
                </div>
            </div>

            <div ng-view></div>

            <script src="js/app.js"></script>

            <script src="js/controllers/MainController.js"></script>
            <script src="js/controllers/AboutController.js"></script>

        </body>
    </html>

  2. main.css 位于 pasteBin

  3. main.html

    <div class="main">
        <div class="container-fluid" id="map-canvas">
            <leaflet center="mapCenter"></leaflet>
        </div>
    </div>

  4. about.html

    <div class="about">
        <div class="container-fluid">
            <h1>Meet NearMe</h1>
            <h2>The best place to discover new places around you.</h2>
            <a class="btn btn-primary" href="#/">Start exploring</a>
        </div>
    </div>

  5. 应用程序.js

    var app = angular.module('NearMeApp', ['ngRoute', 'leaflet-directive']);

    app.config(function($routeProvider) {
        $routeProvider
        .when('/', {
            controller: 'MainController',
            templateUrl: 'views/main.html'
        })
        .when('/about', {
            controller: 'AboutController',
            templateUrl: 'views/about.html'
        })
        .otherwise({
            redirectTo: '/'
        });

    });

  6. AboutController.js

    app.controller('AboutController', ['$scope', function($scope) {

    }]);

  7. 主 Controller .js

    app.controller('MainController', ['$scope', function($scope) {

        $scope.mapCenter = {
            lat: 40.741934,
            lng: -74.004897,
            zoom: 17
        };

    }]);

如何从第三方服务动态获取纬度和经度？例如，来自 JSON IP API

听说可以通过某种方式获取JSON数据

app.factory('latlon', ['$http', function($http) {
    return $http.get('http://ip-api.com/json')
        .success(function(data) {
            return data;
        })
        .error(function(err) {
            return err;
        });
}]);

但我不知道在我的情况下该做什么以及如何使用它。你能帮我解决这个问题吗？

已解决

问题已解决

主 Controller .js

app.controller('MainController', ['$scope', '$http', function($scope, $http) {
    $scope.mapCenter = {};
    $http.get('http://ip-api.com/json')
        .success(function(data) {

            $scope.mapCenter.lat = data.lat;
            $scope.mapCenter.lng = data.lon;
            $scope.mapCenter.zoom = 17;

        });
}]);

最佳答案

不太确定“我如何确保数据(纬度和经度)是动态的”是什么意思，但您可以利用 HTML5 geolocation函数:navigator.geolocation.getCurrentPosition(成功[, error[, options]])

您应该将其抽象为一个单独的服务或工厂，以使其更易于重用并避免依赖于 window

angular.module('app', []).factory('GeolocationService', ['$q', '$window', function ($q, $window) {

    function getPosition() {
      var deferred = $q.defer();

      if (!$window.navigator.geolocation) { // check if geolocation is supported
        deferred.reject('Geolocation is not supported.');
        return;
    }

    $window.navigator.geolocation.getCurrentPosition( // get the current position 
        function (position) { // ok
            deferred.resolve(position);
        },
        function (err) { // error
            deferred.reject(err);
        });

    return deferred.promise; // returned as a promise
  }

  return {
    getCurrentPosition: getCurrentPosition
  };
}]);

然后你可以像这样从你的 Controller 中调用它

geolocationSvc.getPosition().then(
   function success(position){
     $scope.mapCenter = {
      lat: pos.coords.latitude,
      lng: pos.coords.longitude,
      zoom: 17      
}, 
function error(err){
  console.log('ERROR(' + err.code + '): ' + err.message);
});

请注意，此代码尚未经过实际测试，但应为您提供如何实现的概要。

关于javascript - AngularJS，传单。如何从第三方服务动态获取纬度和经度坐标？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34261023/

27 4 0
文章推荐： javascript - slider 功能在 safari 中不像在 chrome/firefox 中那样运行
文章推荐： javascript - ionic Controller 和服务 : "TypeError:... is not a function"
文章推荐： javascript - 第二天不能使用 setDate
文章推荐： javascript - 使用 bitcoinjs-min.js 从字节数组转换为十六进制格式
塔克拉玛干
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com