0
我對此很新穎。我試圖建立一個商店定位器，並試圖找出如何將輸入值從一個頁面傳遞到另一個頁面。用戶將在一個頁面上的表單中輸入他們的郵政編碼或地址，然後使用輸入在另一個頁面上調用地圖和位置。將輸入從一頁傳遞到另一個
我使用ehound店鋪定位平臺（樣本 - 在這裏 - >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®ion=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調用。任何幫助將不勝感激。
我對其他建議有問題。就像我說的，我沒有受過這方面的教育。假設我剛剛使用PHP來傳遞變量。並把它放在表單中，就像這樣...... value =「<？= $ _ POST ['address'];？> ....我以爲自己在正確的軌道上，然後我可以做一個自動錶單提交以加載地圖，但頁面只是不斷提交/循環。有沒有辦法阻止它？ – jughead47