0

ドロップダウン メニューを使用して列に基づいてポイントを選択する Google Fusion Tables マップがあります。

私が夢中になってみるまで、マップはうまく機能します。php API を使用して、選択したドロップダウン値を単純に表示しようとしました。これは機能しますが、マップがリロードされます。マップとフォームのリロードを回避する方法はありますか?

PHP初心者のため、わかりにくい点がありましたらご容赦ください。

<!DOCTYPE html>
<html>
<head>
<style>
#map_canvas { width: 500px; height: 400px; }
</style>

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false">    
</script>
<script type="text/javascript">
var map;

var layer;
var tableid = xxxxxx;

function initialize() {
map = new google.maps.Map(document.getElementById('map_canvas'), {
center: new google.maps.LatLng(38.98610025220408, -76.85897827148438),
zoom: 10,
mapTypeId: google.maps.MapTypeId.ROADMAP
});

layer = new google.maps.FusionTablesLayer(tableid);
layer.setQuery("SELECT 'lat' FROM " + tableid);
layer.setMap(map); 
}

function changeMap() {
var searchString = document.getElementById('searchString').value.replace("'", "\\'");
if(searchString == "") {
layer.setQuery("SELECT 'lat' FROM " + tableid);
return;
}
layer.setQuery("SELECT 'lat' FROM " + tableid + " WHERE 'Unit' = '" + searchString + "'");
}
</script>

</head>
<body onload="initialize();">

<div id="map_canvas"></div>

<div style="margin-top: 10px;">
<form method="post" action="<?php echo $PHP_SELF;?>">
<label>Unit </label>
<select class="dropdown" id="searchString" name="searchString">
<option value="">--Select--</option>
<option value="Ft Chaplin">Ft Chaplin</option>
<option value="Ft Davis">Ft Davis</option>
<option value="Ft Stanton">Ft Stanton</option>
<option value="Lower">Lower</option>
<option value="Middle">Middle</option>
<option value="Nash Run">Nash Run</option>
<option value="Piney Run">Piney Run</option>
<option value="Stickfoot">Stickfoot</option>
<option value="Upper">Upper</option>
</select>
<input type="submit" class="mapit"   onClick=" changeMap();" name="submit" value="Map it!"  align="middle">
</form>
</div>
<?php

include('../maps/client_login/clientlogin.php');
include('../maps/client_login/sql.php');
include('../maps/client_login/file.php');
$tableid = xxxxxx;
$username = "xxxx";
$password = "xxxx";
$token = ClientLogin::getAuthToken($username, $password);
$ftclient = new FTClientLogin($token);

$condition = $_POST["searchString"];


echo "These Projects are in ".$condition."";
?>
</body>
</html>`
4

1 に答える 1

0

ボタン:

<input type="submit" class="mapit"   onClick=" changeMap();" name="submit" value="Map it!"  align="middle">

フォームを送信し、ページをリロードします。

ボタンに置​​き換えます。

<button class="mapit" onclick="changeMap()">Map It!</button>
于 2011-11-30T18:47:17.737 に答える