将模式位置的地图位置值传递给已打开的父页面。使用rails，ruby和bootstrap

Question

我已经为这个问题苦苦挣扎了3天，并希望找到一些不错的解决方案...：

我正在尝试在模态内部获取Google Maps的当前位置值（经度，纬度），并将这些值带回到将要填写的输入页面的表单输入中。

这是我的代码：

main.html.erb（父页面）

<form action="/ask/fine/<%= @chap.id %>" class="col-md-12 clearfix">
  <div class="panel panel-default">
    <div class="panel-heading clearfix"> 
        <h1>Current Location</h1>
        <input type="hidden" id="lon" value="" />
        <input type="hidden" id="lat" value="" />       
        <input type="button" class="btn btn-info" data-toggle="modal" data-target="#myModal_map" value="CURRENT LOCATION CHECK">
    </div>
    <div class="panel-body">
    <textarea class="form-control" rows="10" name="content" placeholder="What's happening?" required></textarea>
    </div>  
  </div>
    <input type="submit" class="btn btn-info btn-block btn-lg" value="Submit">  
</form>

_modal_map.html.erb（模态）

    <!DOCTYPE html>
<html>
  <head>
    <title>Geolocation</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <style>
      #map-canvas {
        height: 300px;
        margin: 0px;
        padding: 0px
      }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>

    <script>

var map;

function initialize() {

  var mapOptions = {
    zoom: 13
  };
  map = new google.maps.Map(document.getElementById('map-canvas'),
      mapOptions);

  // Try HTML5 geolocation
  if(navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
      var pos = new google.maps.LatLng(position.coords.latitude,
                                       position.coords.longitude);

       var lonlon = position.coords.longitude.toString();
       var latlat = position.coords.latitude.toString();

       document.getElementById('lon').innerHTML = lonlon;
       document.getElementById('lat').innerHTML = latlat;

       var lons = position.coords.longitude.toString().substr(0,10);
       var lats = position.coords.latitude.toString().substr(0,10);

       var lonlat = lats + "|" + lons;

       var vReturn = new Object();
        vReturn.lon = lonlon;
        vReturn.lat = latlat;
        window.returnValue = vReturn;

      var infowindow = new google.maps.InfoWindow({
        map: map,
        position: pos,
        content: lonlat
      });

      map.setCenter(pos);
    }, function() {
      handleNoGeolocation(true);
    });
  } else {
    // Browser doesn't support Geolocation
    handleNoGeolocation(false);
  }
}

function handleNoGeolocation(errorFlag) {
  if (errorFlag) {
    var content = 'Error: The Geolocation service failed.';
  } else {
    var content = 'Error: Your browser doesn\'t support geolocation.';
  }

  var options = {
    map: map,
    position: new google.maps.LatLng(60, 105),
    content: content
  };

  var infowindow = new google.maps.InfoWindow(options);
  map.setCenter(options.position);
}

google.maps.event.addDomListener(window, 'load', initialize);



    </script>
  </head>
<body>
<div id="myModal_map" class="modal fade">
        <div class="modal-dialog modal-lg" style="margin-top: 10%;">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title">YOUR LOCATION</h4>
                </div>
                    <div class="modal-body" style="height: 350px;">
                    <div id="map-canvas"></div>
                    </div>

                    <div class="modal-footer">
                    <input type="hidden" id="lon" value="" />
                    <input type="hidden" id="lat" value="" />
                    <input type="button" data-dismiss="modal" class="btn btn-primary" onclick="javascript:return done()" value="SAVE">
                </div>
            </div>
        </div>
    </div>
</body>

<script>

function done() {
    var vReturnValue = new Object();
    vReturnValue.lon = document.getElementById('lon').value
    vReturnValue.lat = document.getElementById('lat').value
    window.returnValue = vReturnValue;
});

</script>

</html>

我尝试使用returnValue和sessionStorage失败。 如何在父页面的表单内成功提交这两个输入值（经度，纬度）？

Answer 1

您可以使用window.opener从子窗口引用父窗口，只要两个页面都来自同一域即可。

window.opener === parentWindow

如果您的模态来自其他域，则需要使用postMessage希望不会出现该问题，因为设置起来很麻烦。

将模式位置的地图位置值传递给已打开的父页面。使用rails，ruby和bootstrap

问题描述

1 个解决方案

解决方案1
0 2015-05-23 05:59:51

将模式位置的地图位置值传递给已打开的父页面。 使用rails，ruby和bootstrap

问题描述

1 个解决方案

解决方案1 0 2015-05-23 05:59:51

将模式位置的地图位置值传递给已打开的父页面。使用rails，ruby和bootstrap

解决方案1
0 2015-05-23 05:59:51