Ruby Rails,用户可以设置他们的位置

Ruby on Rails, users can set their location

所以我正在 Rails 上使用 Ruby 开发一个网络应用程序,我想找到一种方法,让用户在创建他的帐户时可以设置他的位置。我正在考虑类似 google 地图 API 用于 rails 的东西,用户将 select 他的居住地。

如果有人对此有任何提示,我将不胜感激!

有一个很好的 SlideShare 讨论了在您的 rails 应用程序中启用地理定位。您可以使用 javascript.

轻松获取用户的位置并将其设置为默认位置

假设您想获取用户的当前位置并将其显示在您的视图中: 首先包括适当的 google 地图 api js 库:

<script src="https://maps.googleapis.com/maps/api/js"></script>

views/index

<body>

  <div class="container">

    <div class="error-message">
    </div>

    <div class="jumbotron">
      <h1>Google Maps</h1>
    </div>

    <div class="location">
      <div class="loc longitude">
        <h3>Longitude</h3>
        <p id="longitude"><i class="fa fa-spinner fa-spin"></i></p>
      </div>
      <div class="loc latitude">
        <h3>Latitude</h3>
        <p id="latitude"><i class="fa fa-spinner fa-spin"></i></p>
      </div>
    </div>

    <div class="row">
      <div class="col-md-12 google-map-container">
        <div id="google-map">
          <h3>Map</h3>
          <div id="map_canvas">
            <div class="  ">
              <i class="fa fa-spinner fa-spin fa-5x"></i>
            </div>
          </div>
        </div>
      </div>
    </div>

  </div> <!-- /container -->

</html>

现在假设您有两个 js 文件,一个用于获取用户的经度和纬度,另一个用于创建并插入基于用户位置的地图

fetch_location.js

$(document).ready(function(){
    var x = document.getElementById("latitude");
    var y = document.getElementById("longitude");
    // $('.vertical-align').hide();
  function getLocation() {
        navigator.geolocation.getCurrentPosition(function(position){
            x.innerHTML =  position.coords.latitude.toFixed(4);
            y.innerHTML = position.coords.longitude.toFixed(4);

            insertMap(latitude,longitude);
        });

  }

  getLocation();
});

然后在inser_map.js

function insertMap(latitude, longitude) {

$('#map_canvas').html(initialize(latitude,longitude));

    function initialize(latitude,longitude){
   var mapCanvas = document.getElementById('map_canvas');
    var mapOptions = {
      center: new google.maps.LatLng(latitude,longitude),
      zoom: 8,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    var map = new google.maps.Map(mapCanvas, mapOptions);
    google.maps.event.addDomListener(window, 'load', initialize);
  }
}

insertMap 函数将使用地图和用户位置的 pin 填充 id map_canvas 的 div。

然后您可以使用此信息将用户的位置保存到数据库中。