Question

我对此很新。我正在尝试构建一个商店定位器，并试图找出如何将输入值从一个页面传递到另一个页面。用户可以在一个页面上输入他们的邮政编码或地址，并使用输入在另一个页面上调用地图和位置。

我正在使用ehound商店定位器平台（示例 - 此处 - ＆gt; http://www.ehoundplatform.com/api/1....nd-google.html）

地图/定位器脚本是这个

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Store Locator Demo using FreeHound and Google Maps V.3</title>
<style type="text/css">
#map_canvas {
  height: 400px;
  width:710px;
  margin-bottom: 10px;
}
.addressBox {
    margin-bottom:10px;
}
</style>
<script type="text/javascript" src="http://www.ehoundplatform.com/api/1.0            /proximity.js?key=xz396aw1qe432q1"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&region=AU"></script>
<script type="text/javascript">
  var geocoder;
  var map;
  var bounds;
  var markersArray = [];
  var infoWindow;
  var mapCenterLat = '-28.1594';
  var mapCenterLon = '135.6456';

  function initialize() {
    geocoder = new google.maps.Geocoder();
    var myOptions = {
      zoom: 4,
      center: new google.maps.LatLng(mapCenterLat, mapCenterLon),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

    //initialise single info window to show only one at a time
    infoWindow = new google.maps.InfoWindow();

        //improve usability by centering map around search point on zoom in/out
        google.maps.event.addListener(map, 'zoom_changed', function() {          if(mapCenterLat && mapCenterLon) {
        setTimeout('centerMap(mapCenterLat, mapCenterLon)', 300);
  }
});
}

  function addMarkerOverlay(location, title, infoBox, image) {
  var marker = new google.maps.Marker({
    position: location,
    map: map,
    icon: image
  });
  marker.setTitle(title);

  google.maps.event.addListener(marker, 'click', function() {
         infoWindow.setContent(infoBox);
         infoWindow.open(map, marker);
    });

  markersArray.push(marker);
}

function deleteOverlays() {
  if (markersArray) {
        for (i in markersArray) {
            markersArray[i].setMap(null);
        }
        markersArray.length = 0;
  }
}

function searchAroundMe() {
deleteOverlays();

bounds = new google.maps.LatLngBounds();

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);

    //custom marker to mark initial search location
    var image = new google.maps.MarkerImage('search_location.png',
        // This marker is 32 pixels wide by 32 pixels tall.
        new google.maps.Size(32, 32),
        // The origin for this image is 0,0.
        new google.maps.Point(0,0),
        // The anchor for this image is the center of the red circle at 16,16.
        new google.maps.Point(16, 16)
    );

    addMarkerOverlay(results[0].geometry.location, 'search spot', 'search initiated from here', image);
    bounds.extend(results[0].geometry.location);

    var searchLatitude = results[0].geometry.location.lat();
    var searchLongitude = results[0].geometry.location.lng();

            mapCenterLat = searchLatitude;
            mapCenterLon = searchLongitude;

    freeHound = new FreeHound( 'showLocs' );
    search = new FH_Search(); 
            search.count = 10; //number of locations to be returned in the result set
            search.max_distance = 0; //distance limit for proximity search in km, 0 for unlimited
            //search from a specific point using latitude and longitude of that point
            search.point = new FH_Location( new FH_LatLon( searchLatitude,searchLongitude ) );

            //search.filters = new Array();
            //search.filters.push( new FH_SearchFilter('cat_id', 'eq', '177') );

            search.create_log = false;
            freeHound.proximitySearch( search );
  } else {
    alert("Geocode was not successful for the following reason: " + status);
  }
});
}

  function showLocs(response){
    if ( response.error_code ) {
        alert(response.error_message);
    }

    if ( response.record_set ) {
        //show results in a table
        var resultsTable = '<table border="1" cellspacing="0" cellpadding="3" summary="">';
        resultsTable += '<tr>';
        resultsTable += '<td>#<\/td>';
        resultsTable += '<td>Street Address<\/td>';
        resultsTable += '<td>Town/Suburb/City<\/td>';
        resultsTable += '<td>Postal Code<\/td>';
        resultsTable += '<td>State/Province<\/td>';
        resultsTable += '<td>Distance<\/td>';
        resultsTable += '<td>Longitude<\/td>';
        resultsTable += '<td>Latitude<\/td>';
        resultsTable += '<\/tr>';

        for (var record_count = 0, rl = response.record_set.length; record_count < rl; record_count++ ) {
            var record = response.record_set[record_count];
            var title = record.details.location_name;
            var infoBoxContent = '<strong>Location #'+(record_count+1).toString()+'<\/strong>';
            infoBoxContent += '<br \/>'+record.address.street_address+'<br \/>'+record.address.town + ', ' + record.address.postal_code +'<br \/>';
            infoBoxContent += 'Distance: '+record.distance.km+'km<br \/>';
            addMarkerOverlay(new google.maps.LatLng(record.latitude, record.longitude), title, infoBoxContent, null);

            if (record_count < 6) {
                bounds.extend(new google.maps.LatLng(record.latitude, record.longitude));
            }

            resultsTable += '<tr>';
            resultsTable += '<td>'+(record_count+1).toString()+'<\/td>';
            resultsTable += '<td>'+record.address.street_address+'<\/td>';
            resultsTable += '<td>'+record.address.town+'<\/td>';
            resultsTable += '<td>'+record.address.postal_code+'<\/td>';
            resultsTable += '<td>'+record.address.state+'<\/td>';
            resultsTable += '<td>'+record.distance.km+'KM<\/td>';
            resultsTable += '<td>'+record.longitude+'<\/td>';
            resultsTable += '<td>'+record.latitude+'<\/td>';
            resultsTable += '<\/tr>';
        }

        map.fitBounds(bounds);

        resultsTable += '<\/table>';

        var resultSet = document.getElementById('resultSet');
        resultSet.innerHTML = resultsTable;
    }
}

  function centerMap(lat,lon) {
    var centrePoint = new google.maps.LatLng(lat,lon);
    map.setCenter(centrePoint);
}
</script>
</head>
<body onload="initialize()">
  <div class="addressBox">

    <form action="" onsubmit="searchAroundMe(); return false;">
    <input id="address" type="textbox" value="">
    <input type="submit" name="search" value="Address Search">
    </form>
  </div>
  <div id="map_canvas"></div>
  <div id="resultSet"></div>
</body>
</html>

并且表单本身将在另一页上。试图拉过地址输入。这显然不起作用

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>KOI Store Locator</title>
</head>
<body>
  <div>

    <form action="ehound.php" method="post">
    <input id="address" name="address" type="textbox">
    <input type="submit" name="search" value="Address Search">
    </form>
  </div>

</body>
</html>

我已经四处查看通过php等传递输入，但是这个脚本似乎也调用了javascript，我无法实现任何有效的方法。任何帮助将不胜感激。

Answer 1

将单击处理程序附加到表单提交按钮，在处理程序中只需从表单中获取所需的值，使用所需参数构建查询字符串，然后使用window.location.assign（“yourotherpage.html？”+ theQueryString）。然后只需在另一页的javascript中提取查询字符串参数。

Answer 2

我不确定是什么，但总的来说有两种很好的方法可以做到这一点。

您刚刚提交了一份表单，该表单将数据发送到服务器，因此只需让服务器将您需要的数据插入下一页。如何实现这一点的具体细节主要取决于您使用的服务器。

或非服务器方法：存储一个cookie然后如果另一个页面在同一个域上，那么你应该能够检索它。 Cookie非常简单，http://www.quirksmode.org/js/cookies.html（您可以跳过关于Cookie细节的长而轻微的混淆解释，只需抓取脚本）。

Answer 3

您可以传递信息的另一种方式是隐藏的表单元素。 This qustion is pretty similar并提出了一些很好的建议。

将输入从一个页面传递到另一个页面

3 个答案: