0

私はスタック（および一般的なプログラミング）を意味するのは初めてですが、単純なアプリを稼働させています。

私のモデルは次のようになります。

var mongoose = require('bluebird').promisifyAll(require('mongoose'));

var RestaurantSchema = new mongoose.Schema({
  name: String,
  street: String,
  zip: Boolean,
  city: String,
  country: String,
  location: {
    coordinates: {type: [Number], index: '2dsphere'}
  },
  kitchen: String,
  rating: Number
});

RestaurantSchema.index({location: '2dsphere'});

export default mongoose.model('Restaurant', RestaurantSchema);

データベースに次のものをシードします。

Restaurant.find({}).removeAsync()
  .then(() => {
    Restaurant.create({
      name: 'Kaspers restaurant',
      street: 'Nørrebrogade 1',
      zip: '2200',
      city: 'Copenhagen',
      country: 'Denmark',
      location: ['12.548057','55.7034'],
      kitchen: 'Italian',
      rating: '4.5'
    }, {
      name: 'Kristinas restaurant',
      street: 'Østerbrogade 2',
      zip: '2200',
      city: 'Copenhagen',
      country: 'Denmark',
      location: ['12.541565', '55.689206'],
      kitchen: 'Thai',
      rating: '5'
    }, {
      name: 'Noma',
      street: 'Strandgade 93',
      zip: '1401',
      city: 'Copenhagen',
      country: 'Denmark',
      location: ['12.59620', '55.677933'],
      kitchen: 'Nordisk',
      rating: '6'
    });
  });

私のコントローラーは、次の方法でユーザーの場所を抽出し、レストランを一覧表示します。

angular.module('venueApp')
  .controller('RestaurantsCtrl', function ($scope, $http, $window) {
      $http.get('/api/restaurants')
          .success(function(data) {
            $scope.restaurants = data;
            console.log($scope.restaurants);
          })
          .error(function(err) {
            console.log('Error! Something went wrong');
          });

      $window.navigator.geolocation.getCurrentPosition(function(position) {
      var lat = position.coords.latitude;
      var lng = position.coords.longitude;

        $scope.$apply(function () {
          $scope.lat = lat;
          $scope.lng = lng;
        });
      });




  });

そして、私のビューにはユーザーの場所が表示され、最大の入力が取られ、次の方法でレストランがリストされます。

<navbar></navbar>
<div>
    This is your location:
    <input type="text" class="disabled" placeholder="{{lat}}">
    <input type="text" class="disabled" placeholder="{{lng}}">
    <br>
    How far do you want to search:
    <div class="form-group">
        <label for="distance">Max. Distance (miles)</label>
        <input type="text" class="form-control" id="distance" placeholder="500" ng-model="formData.distance">
    </div>


</div>
<div class="col-md-12">
    <table class="table table-striped">
        <thead>
        <th>Navn</th>
        <th>By</th>
        <th>Køkken</th>
        <th>Latitude</th>
        <th>Longtitude</th>
        </thead>
        <tbody>
            <tr ng-repeat="restaurant in restaurants">
                <td>{{restaurant.name}}</td>
                <td>{{restaurant.city}}</td>
                <td>{{restaurant.kitchen}}</td>
                <td>{{restaurant.location.coordinates[0]}}</td>
                <td>{{restaurant.location.coordinates[1]}}</td>
            </tr>
        </tbody>
    </table>

私は yeoman angular-fullstack ジェネレーターを使用しました。私のhtmlビューでは、ユーザーの現在の場所「lat」と「lng」を抽出し、ユーザーから最大距離内にあるレストランのデータベースを検索したいと考えています。

この足場でこれを行うにはどうすればよいですか? これらの例/チュートリアルを機能させようとしましたが、役に立ちませんでした:(

4

0 に答える 0