重定向到新页面时保留以前的值

时间:2018-03-29 14:05:33

标签: javascript ruby-on-rails google-maps

我正在使用以下javascript在地图上选择一个点并使用此点填充地址字段。地址字段在标签的rails中使用,以便按地址搜索:

<%= form_tag search_path, method: "get", id: "other-form"  do %>
  <%= text_field_tag :location, params[:location], id:"address" %>
  <%= submit_tag "submit", :id=> "my-button" %>
  <%= text_field_tag :search_other, params[:search] %>
  <%= hidden_field_tag :lat %>
  <%= hidden_field_tag :lng %>
<% en d%>


<div id="map_canvas"></div>

<script>
  var map;
  var geocoder;
  var mapOptions = { center: new google.maps.LatLng(0.0, 0.0), zoom: 4,
                     mapTypeId: google.maps.MapTypeId.ROADMAP };

  function initialize() {
      var myOptions = {
          center: new google.maps.LatLng(38.89103282648849, -97.646484375),
          zoom: 4,
          mapTypeId: google.maps.MapTypeId.ROADMAP
      };

      geocoder = new google.maps.Geocoder();
      var map = new google.maps.Map(document.getElementById("map_canvas"),
                                    myOptions);
      google.maps.event.addListener(map, 'click', function(event) {
          placeMarker(event.latLng);
      });

      var marker;
      function placeMarker(location) {
          if(marker) { //on vérifie si le marqueur existe
              marker.setPosition(location); //on change sa position
          } else {
              marker = new google.maps.Marker({ //on créé le marqueur
                  position: location,
                  map: map
              });

              var circle = new google.maps.Circle({
                  map: map,
                  radius: 24140,    // 15 miles in metres
                  fillColor: '#08aa23'
              });
              circle.bindTo('center', marker, 'position');
          }

          document.getElementById('lat').value=location.lat();
          document.getElementById('lng').value=location.lng();
          getAddress(location);
          var cookie_val = ('other_lat_lng', location.lat() + "," + location.lng())
        document.cookie = "other_lat_lng=" + escape(cookie_val);

      }

      var a_message = "<%= I18n.t 'map_other' %>"

      function getAddress(latLng) {
          geocoder.geocode( {'latLng': latLng},
              function(results, status) {
                  if(status = google.maps.GeocoderStatus.OK) {
                      if(results[0]) {
                          document.getElementById("address").value = results[0].formatted_address;
                      } else {
                        document.getElementById("address").value = a_message;
                      }
                  } else {
                    document.getElementById("address").value = status;
                  }
              });
      }
  }
  google.maps.event.addDomListener(window, 'load', initialize);
</script>


<script src="https://cdn.jsdelivr.net/npm/js-cookie@2/src/js.cookie.min.js"></script>

然后在结果页面上我有一个link_to,它会使用地图和搜索表单重定向到另一个页面。重定向时,我希望这个新页面保持在上一次搜索中选择的相同点。

1 个答案:

答案 0 :(得分:0)

您可以通过传递link_to公开:lat :lng ,然后使用一些数据标记将它们公开给JS方面。

<%= link_to "new link", new_page_path(lat: params[:lat], lng: 
params[:lng]) %>