使用 Coffee Script 使用地址而不是坐标进行地理编码答案

【问题标题】：Geocode with the address instead of coordinates using Coffee Script使用 Coffee Script 使用地址而不是坐标进行地理编码
【发布时间】：2020-11-12 13:15:00
【问题描述】：

我已经使用 Google Maps JavaScript API 初始化了一个地图，但这里有一个使用 latLng/坐标的示例，我想改用地址。

我假设我会在“map.addListener”下有这个，但我不确定要包括什么，因为我对 Coffee 脚本完全陌生。

我从这里开始学习教程：https://www.sitepoint.com/geocoder-display-maps-and-find-places-in-rails/

jQuery ->
  markersArray = []
  lat_field = $('#location_lat')
  lng_field = $('#location_long')
  
  latitude =  53.477737
  longitude = -3.023881

  window.initMap = ->
    if $('#map').size() > 0
      map = new google.maps.Map document.getElementById('map'), {
        center: {lat: latitude, lng: longitude}
        zoom: 18
      }

      map.addListener 'click', (e) ->
        placeMarkerAndPanTo e.latLng, map
        updateFields e.latLng

      $('#find-on-map').click (e) ->
        e.preventDefault()
        placeMarkerAndPanTo {
          lat: parseFloat lat_field.val(), 15
          lng: parseFloat lng_field.val(), 15
        }, map

  placeMarkerAndPanTo = (latLng, map) ->
    markersArray.pop().setMap(null) while(markersArray.length)
    marker = new google.maps.Marker
      position: latLng
      map: map

    map.panTo latLng
    markersArray.push marker

  updateFields = (latLng) ->
    lat_field.val latLng.lat()
    lng_field.val latLng.lng()

我尝试了以下类似的方法，但无济于事：

jQuery ->
  markersArray = []
  lat_field = $('#location_lat')
  lng_field = $('#location_long')
  
  latitude =  53.477737
  longitude = -3.023881

  window.initMap = ->
    if $('#map').size() > 0
      map = new google.maps.Map document.getElementById('map'), {
        center: {lat: latitude, lng: longitude}
        zoom: 18
      }

      map.addListener 'click', (e) ->
        placeMarkerAndPanTo e.latLng, map
        updateFields e.latLng
    


        
    codeAddress = () ->
        address = document.getElementById('address').value;
        
        @geocoder.geocode(
            'address': address,
            (results, status) => 
            if status is google.maps.GeocoderStatus.OK
                callback(result[6])
                latitude = results[0].geometry.location.lat();
                longitude = results[0].geometry.location.lng();
            
                $('#find-on-map').click (e) ->
                e.preventDefault()
                placeMarkerAndPanTo {
                  latitude
                  longitude
                }, map
                        
            else alert("Geocode was not successful for the following reason: " + status);
        )

  placeMarkerAndPanTo = (latLng, map) ->
    markersArray.pop().setMap(null) while(markersArray.length)
    marker = new google.maps.Marker
      position: latLng
      map: map

    map.panTo latLng
    markersArray.push marker

  updateFields = (latLng) ->
    lat_field.val latLng.lat()
    lng_field.val latLng.lng()

【问题讨论】：

您应该使用 Places API 而不是 Geocoder。 Geocoder 仅接受 Lat/Lng 作为参数，而 Places 接受地址

标签： ruby-on-rails google-maps-api-3 coffeescript google-geocoder

【解决方案1】：

使用来自 Google Maps Javascript API (@https://developers.google.com/maps/documentation/javascript/overview) 的原始代码与 Sitepoint 示例代码结合使用，返回到我的原始代码。

function codeAddress() {
    var address = document.getElementById('location_raw_address').value;
    geocoder.geocode( { 'address': address}, function(results, status) {
      if (status == 'OK') {
        var latitude = results[0].geometry.location.lat();
        var longitude = results[0].geometry.location.lng();
        
        //alert("This is the latitude: "+latitude);
        //alert("This is the longitude: "+longitude);
        
        map.setCenter(results[0].geometry.location);
        var marker = new google.maps.Marker({
            map: map,
            position: results[0].geometry.location
        });
      } else {
        alert('Geocode was not successful for the following reason: ' + status);
      }
    });
  }

<div id="floating-panel">
  <%= form_for @location do |f| %>
    <%= f.hidden_field :ip_address, value: request.ip %>
    <fieldset class="form-group">
      <%= f.label :raw_address, 'Address or Coordinates' %>
      <%= f.text_field :raw_address, class: "form-control", placeholder: "Edge Hill, Edge Hill Railway Station, Liverpool, UK" %>
      <%= f.submit 'Search!', class: 'btn btn-primary', :onclick => "codeAddress();" %>
    </fieldset>
  <% end %>
</div>

【讨论】：