Google 地图，反向地理编码，return street_address

Question

我有一个允许用户在 Google 地图上创建新标记的表单，其中包含用户提供的信息的信息窗口。一个字段允许用户输入位置描述（即 "Buds Burgers on Sonoma in Vallejo"），然后将创建一个标记，其中包含与我标记为 "Location.address" 的信息完全相同的信息。我的目标是对给定的坐标进行反向地理编码并输出所提供的任何位置的街道地址。我能够 console.log lat 和 lng 所以我知道我可以访问它们，我只是无法弄清楚如何使用它们。

location.rb

create_table "locations", force: :cascade do |t|
    t.string   "location_name"
    t.string   "location_address"
    t.string   "location_description"
    t.float    "lat"
    t.float    "lng"
    t.datetime "created_at",           null: false
    t.datetime "updated_at",           null: false
  end

我的地图页面上的脚本运行：

<script>
    map = new google.maps.Map(document.getElementById('map'), {
                zoom: 10,
                center: new google.maps.LatLng(37.725685, -122.156830),
                mapTypeId: google.maps.MapTypeId.ROADMAP
                });

      var places = <%= @locations.to_json.html_safe %>
      var infowindow = new google.maps.InfoWindow();
      var marker, i;
      for (i = 0; i < places.length; i++) {
        marker = new google.maps.Marker({
        position: new google.maps.LatLng(places[i].lat, places[i].lng),
        map: map
        });
        var lat = (places[i].lat);
        var lng = (places[i].lng);

        console.log(" lat: " +  places[i].lat + " " + "lng: " + places[i].lng);
        google.maps.event.addListener(marker, 'click', (function(marker, i) {
          return function() {
            infowindow.setContent(places[i].location_name + "   <br />  " + places[i].location_description  + "    <br />     " + places[i].location_address);
            infowindow.open(map, marker);
          }
        })(marker, i));
      }
</script>

表格：

 <%= form_for @location, :html => { :class => "form-inline" } do |f| %>
  <%= f.label :name %>:
  <%= f.text_field :location_name %><br />

  <%= f.label "Description or Discount Offered" %>:
  <%= f.text_field :location_description %><br />

  <%= f.label :address %>:
  <%= f.text_field :location_address %><br />

  <%= f.submit "Create New Location"%>
 <% end %>

我束手无策。请帮忙

谢谢。

Answer 1

我不熟悉 Ruby-on-Rails 但我绝对可以在 Google 地图 API.我们只使用坐标 places[i].lat 和 places[i].lng 因为你在 post 中说过你可以记录它们的值。

您想对获取的坐标进行反向地理编码。

Reverse geocoding is the process of converting geographic coordinates into a human-readable address.

让我们从创建一个新的 Geocoder 实例开始。

var geocoder = new google.maps.Geocoder();

这意味着已使用变量 "geocoder" 创建了 Geocoder 对象的新实例。您现在可以使用 Geocoder 的 geocode 方法.

在反向地理编码中，地理编码方法接受2个参数——位置和回调。您需要使用 "location" 参数并提供逗号分隔的 latitude/longitude 或者您可以简单地使用 new google.maps.LatLng(lat, lng) 对象。这个的值应该是你获取的坐标。

geocoder.geocode( { 'location' : new google.maps.LatLng(places[i].lat, places[i].lng) }, callback );

另一方面，回调参数也需要两个参数。一是结果，二是地位。您可以随意命名参数。这是我们大部分逻辑将实现的地方。

function(results, status) {
   if ( status === 'OK' ) {
   } 
}

在回调函数中，应该有一个条件来检查 returned 状态是否为 'OK'。如果是这样，results 参数将 return 一个结果数组。 反向地理编码 文档中有一条注释：

The reverse geocoder often returns more than one result. Geocoded addresses are not just postal addresses, but any way to geographically name a location.

您可以在结果[0].formatted_address下获取格式化后的地址。也可以得到address_components如"street_number","route","locality ”和“国家”并将其附加到 DOM。我建议使用外部库 JQuery 使 DOM 操作更容易。你可以这样做：

function(results, status) {
   if ( status === 'OK' ) {
   $('div#street_name').html('<p>'+results[0].formatted_address.+'</p>');
   } 
}

整个代码看起来像这样：

var geocoder = new google.maps.Geocoder();

geocoder.geocode( { 'location' : new google.maps.LatLng(places[i].lat, places[i].lng) }, function(results, status) {
   if ( status === 'OK' ) {
   $('div#street_name').html('<p>'+results[0].formatted_address.+'</p>');
   } 
});

希望这对您有所帮助，祝您编码愉快！

Google 地图，反向地理编码，return street_address

GoogleMaps, Reverse geocode, return street_address

javascript

google-maps

ruby-on-rails

google-maps-api-3

google-geocoder