Question

我有一个表单，允许用户在Google地图上创建一个新标记，其中infoWindow包含用户提供的信息。一个字段允许用户输入位置的描述（即＆＃34;在Vallejo和＃34中的Sonoma上的Buds Burgers;）并且将创建一个标记，其中包含与我标记为＆＃34的完全相同的信息;位置。地址＆＃34 ;.我的目标是反转地理编码给定的坐标并输出所提供的任何位置的街道地址。我可以在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 Maps API。我们只使用坐标 places [i] .lat 和 places [i] .lng ，因为您在帖子中说过您可以记录他们的值。

您想要反转地理编码您获得的坐标。

<强> Reverse geocoding 是将地理坐标转换为a的过程人类可读的地址。

让我们首先创建一个新的Geocoder实例。

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

这意味着使用变量“geocoder”创建了一个新的Geocoder对象实例。您现在可以使用Geocoder的地理编码方法。

在反向地理编码中，地理编码方法接受2个参数 - 位置和回调。您需要使用“location”参数并提供以逗号分隔的纬度/经度，或者您只需使用 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' ) {
   } 
}

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

反向地理编码器通常会返回多个结果。地理编码后地址不仅仅是邮政地址，而是地理上的任何方式命名一个位置。

您可以在结果[0] .formatted_address 下获取格式化地址。您还可以获取address_components，例如“ street_number ”，“路线”，“地区”和“国家/地区 “并将其附加到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>');
   } 
});

希望这有助于编码！

GoogleMaps，反向地理编码，返回street_address

1 个答案: