Question

我正在使用此表单将地址编码到地图上。我试图将表单移动到一个单独的页面，提交到页面与地图。我不知道如何将这些分开...关于如何将表格与地图分开的任何建议？

 <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=true&libraries=places"> </script>
<style>
  #map {
    height: 400px;
    width: 600px;
    border: 1px solid #333;
    margin-top: 0.6em;
  }
</style>
<script>
var geocoder;
var map;
  var infowindow;
  function initialize() {
    geocoder = new google.maps.Geocoder();
    var loca = new google.maps.LatLng( 33.4987780197 , -117.70713998);

    map = new google.maps.Map(document.getElementById('map'), {
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      center: loca,
      zoom: 8
    });
  }
  function callback(results, status) {
    if (status == google.maps.places.PlacesServiceStatus.OK) {
      for (var i = 0; i < results.length; i++) {
        createMarker(results[i]);
      }
    }
  }
  function createMarker(place) {
    var placeLoc = place.geometry.location;
    var marker = new google.maps.Marker({
      map: map,
      position: place.geometry.location
    });
    google.maps.event.addListener(marker, 'mouseover', function() {
      infowindow.setContent(place.name);
      infowindow.open(map, this);
    });
  }
  function codeAddress() {
  var address = document.getElementById("address").value;
  geocoder.geocode( { 'address': address}, function(results, status) {
  if (status == google.maps.GeocoderStatus.OK) {
    map.setCenter(results[0].geometry.location);
    var marker = new google.maps.Marker({
        map: map,
        position: results[0].geometry.location
    });
    var request = {
      location: results[0].geometry.location,
      radius: 50000,
      name: 'ski',
      keyword: 'mountain',
      type: ['park']
    };
    infowindow = new google.maps.InfoWindow();
    var service = new google.maps.places.PlacesService(map);
    service.nearbySearch(request, callback);
  } else {
    alert("Geocode was not successful for the following reason: " + status);
  }
});
 }
    google.maps.event.addDomListener(window, 'load', initialize);
  </script>
  </head>
  <body>   
     <form  action="map" method="post">
     <label for="zip">Zip Code: </label>
     <input type = "text" id="address" placeholder = "orange county" autofocus></input>
     <input type="button" value="Submit" onclick="codeAddress();" ></input>
     </form>
    <div id="map"></div>
    <div id="text">

Answer 1

最简单的方法是通过URI传递地理编码地址结果，例如：返回此页面时，带有map的页面的URI为：http://exmaple.com/map/，使用URI添加结果，因此URI变为：http://example.com/map/?address=result，然后解析URI。另一种方法是，当您对地址进行地理编码时，可以使用“跨文档消息”，将消息发送到父窗口。

Answer 2

首先，您需要为要传递到下一页的字段设置名称：

<input type = "text" id="address" name="address" placeholder = "orange county" autofocus></input>

您需要一些服务器代码才能接收表单数据。确切的代码取决于您为此代码选择的语言。例如对于PHP，在接收它的页面上使用它的代码（表单的操作中的代码）将是

<?php
$address=isset($_POST['address'])?$_POST['address']:'';
?>

然后你可以在这个页面中使用$ address变量。

在下一页获得表单的结果

2 个答案: