2011-07-15 16 views
0

私はこれでかなり新しいです。私はストアロケータを構築しようとしており、あるページから別のページに入力値を渡す方法を理解しようとしています。ユーザーは1ページにフォームの郵便番号または住所を入力し、入力を使用して別のページで地図と場所を呼び出すことになります。あるページから別のページに入力を渡す

マップ/ロケータスクリプトこの

<!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> 

で、フォーム自体は別のページになります(>http://www.ehoundplatform.com/api/1....nd-google.htmlは - - ここではサンプルを)

私は、店舗検索プラットフォームをehound使用しています。アドレス入力をプルしようとしています。これは明らかに私はPHPと、このような経由で入力を渡すことに周りを見回しましたが、このスクリプトは、同様のjavascriptを呼び出すようだと、私はトラブル働く何かを実装することだ

<!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> 

を動作しません。どんな助けでも大歓迎です。

答えて

1

フォーム送信ボタンにクリックハンドラをアタッチし、ハンドラでフォームから必要な値を取得し、必要なパラメータを含むクエリ文字列を作成し、window.location.assign( "yourotherpage.html?" + theQueryString )。次に、他のページのjavascriptでクエリ文字列パラメータを取得します。

+0

私は他の提案に問題がありました。私が言うように、私はこれで教育を受けていません。だから私は変数を渡すためにPHPを使ったばかりです。そして、それをフォームに入れて... value = "<?= $ _ POST ['address'];?> ....私は正しい軌道にいると思った。地図は表示されますが、ページは送信/ループを続けるだけです。これを停止する方法はありますか? – jughead47

0

私はehoundが何であるかはわかりませんが、一般的にこれを行うには2つの良い方法があります。

データをサーバーに送信するフォームを送信したばかりなので、サーバーが必要なデータを次のページに挿入してください。 これを達成する方法の詳細は、主に使用しているサーバーによって異なります。

または非サーバーアプローチ: クッキーを保存し、他のページが同じドメインにある場合は、それを取得できるはずです。 クッキーは簡単です。http://www.quirksmode.org/js/cookies.html(クッキーの詳細については、長くて穏やかな説明を省略して、スクリプトを手に入れることができます)。

関連する問題