Question

我有一个工作的Codepen here，它只计算两个GPS坐标之间的距离（thanks to the author！）。

然而，当我将代码粘贴到我的html模板中的一个Ionic / AngularJS项目中时（我还没有将脚本外部化为独立的js doc），代码不再有用了......任何人都有想法？感谢。

HTML＆amp; sript：

 <ion-view >    
  <ion-nav-buttons side="left">
    <button class="button button-icon button-clear ion-navicon" menu-toggle="left">
    </button>
  </ion-nav-buttons>
    <ion-nav-title>
      <img class="navigation_bar_logo"src="img/WM_name_transparent_color.png">
    </ion-nav-title>      


   <ion-content class="background_lightgray"  overflow-scroll="true" ng-controller="loadingCtrl">

  <span >the distance btw  and house is <span id="dist"></span> which is awesome </span>
  <p id="dist2"></p>


<ion-list>
  <ion-item  ng-controller="loadingCtrl" bindonce  ng-repeat= "restaurant in restaurantList " href="#">

    <article class="item_frame">
        <div class="marker_left_container">
            <img  class="venue_rest_marker" ng-src="{{restaurant.icon}}">   
            <span class="venu_type_text">{{restaurant.venueType}}</span>
            <span class="distance_from_user_rest">0.7 km</span>
            <span class="distance_from_user_rest2">from current location</span>
        </div>
        <div class="restaurant_details_container">
            <h1 class="restaurant_name_inlist">{{restaurant.Name}}</h1>
            <span class="restaurant_detail_inlist2">{{restaurant.subCuisine}}<br> {{restaurant.subsubCuisine}}</span>
            <span class="restaurant_address">{{restaurant.address}}, <br> </span>
            <span class="restaurant_address">{{restaurant.cp}}, {{restaurant.city}} <br><br></span>
            <span class="restaurant_others">{{restaurant.phoneNumber}}<br> </span>
            <span class="restaurant_others">{{restaurant.website}}<br> <br></span>


        </div>
    </article><!--main article frame 1 -->  

  </ion-item>
  </ion-list>



   </ion-content>
  </ion-view>

  <script>
    var GreatCircle = {
    validateRadius: function(unit) {
    var r = {'KM': 6371.009, 'MI': 3958.761, 'NM': 3440.070, 'YD': 6967420, 'FT': 20902260};
    if ( unit in r ) return r[unit];
    else return unit;
},

distance: function(lat1, lon1, lat2, lon2, unit) {
    if ( unit === undefined ) unit = 'KM';
    var r = this.validateRadius(unit); 
    lat1 *= Math.PI / 180;
    lon1 *= Math.PI / 180;
    lat2 *= Math.PI / 180;
    lon2 *= Math.PI / 180;
    var lonDelta = lon2 - lon1;
    var a = Math.pow(Math.cos(lat2) * Math.sin(lonDelta) , 2) +    Math.pow(Math.cos(lat1) * Math.sin(lat2) - Math.sin(lat1) * Math.cos(lat2) * Math.cos(lonDelta) , 2);
    var b = Math.sin(lat1) * Math.sin(lat2) + Math.cos(lat1) * Math.cos(lat2) * Math.cos(lonDelta);
    var angle = Math.atan2(Math.sqrt(a) , b);

    return angle * r;
},

bearing: function(lat1, lon1, lat2, lon2) {
    lat1 *= Math.PI / 180;
    lon1 *= Math.PI / 180;
    lat2 *= Math.PI / 180;
    lon2 *= Math.PI / 180;
    var lonDelta = lon2 - lon1;
    var y = Math.sin(lonDelta) * Math.cos(lat2);
    var x = Math.cos(lat1) * Math.sin(lat2) - Math.sin(lat1) * Math.cos(lat2) * Math.cos(lonDelta);
    var brng = Math.atan2(y, x);
    brng = brng * (180 / Math.PI);

    if ( brng < 0 ) { brng += 360; }

    return brng;
},

   destination: function(lat1, lon1, brng, dt, unit) {
    if ( unit === undefined ) unit = 'KM';
    var r = this.validateRadius(unit);
    lat1 *= Math.PI / 180;
    lon1 *= Math.PI / 180;
    var lat3 = Math.asin(Math.sin(lat1) * Math.cos(dt / r) + Math.cos(lat1) * Math.sin(dt / r) * Math.cos( brng * Math.PI / 180 ));
    var lon3 = lon1 + Math.atan2(Math.sin( brng * Math.PI / 180 ) * Math.sin(dt / r) * Math.cos(lat1) , Math.cos(dt / r) - Math.sin(lat1) * Math.sin(lat3));

    return {
        'LAT': lat3 * 180 / Math.PI,
        'LON': lon3 * 180 / Math.PI
    };
}

}

  document.getElementById("dist").innerHTML =  Math.round(( GreatCircle.distance(48.853139, 2.368999, 48.826136, 2.321793) * 10 ) / 10 );

Answer 1

找到解决方案，请参阅此处working Plunker

Controller.js：

 var wmapp = angular.module('wmapp', ['wmapp.factory_restaurants','greatCircles'])

 // RESTAURANTLIST CONTROLLER
.controller('restaurantlistController', function ($scope, $rootScope, restaurantsFactory,position,GreatCircle) {
    "use strict";
    $scope.restaurantList = restaurantsFactory.getRestaurants(); //call to restaurantfactory
    $scope.position = position;

    $scope.distanceTo = function(restaurant) {
  var distance = GreatCircle.distance( restaurant.long,restaurant.lat, position.longitude, position.latitude)
  restaurant.distance = distance;
  distance = distance.toFixed(1);
  return distance;
}
})


.factory('position', function( $rootScope ){

    console.log('building position')

    var position = {};

      // 1ST / AUTO GEOLOCATION OF USER 
      // displays a popup to indicate current user location - (disabled)
      // onSuccess Callback - This method accepts a Position object, which contains the current GPS coordinates
     var onSuccess = function(position2) {

          console.log(position2.coords.latitude )
          console.log(position2.coords.longitude)

          position.latitude = position2.coords.latitude;
          position.longitude = position2.coords.longitude;

          $rootScope.$digest()
      };

    function onError(error) { // onError Callback receives a PositionError object
        alert('code: '    + error.code    + '\n' +
              'message: ' + error.message + '\n');
    }

    navigator.geolocation.getCurrentPosition(onSuccess, onError);

  return position;

})

计算距离，在Codepen中工作，而不是在项目中

1 个答案: