私はJavaScriptの初心者なので、インタラクティブに住所を変更できるように、ジオコーディングマーカーをドラッグアンドドロップする方法を作成するためのヘルプを探しています。これは、LOCATION列の行を更新することで可能になると思います。
それを行うための最初のステップは、POSTリクエストを「送信」することですよね?さて、私はこのPOSTリクエストをどのように記述してコードに入れるかわからないので、誰かが私に例を見せてくれるかどうか尋ねたいと思います!
私はJavaScriptの初心者なので、インタラクティブに住所を変更できるように、ジオコーディングマーカーをドラッグアンドドロップする方法を作成するためのヘルプを探しています。これは、LOCATION列の行を更新することで可能になると思います。
それを行うための最初のステップは、POSTリクエストを「送信」することですよね?さて、私はこのPOSTリクエストをどのように記述してコードに入れるかわからないので、誰かが私に例を見せてくれるかどうか尋ねたいと思います!
列を更新するには Fusion Tables API に POST する必要がありますが、現在、 Google はAPI へのクロスドメイン投稿を許可するように CORS ヘッダーを設定していないため、JavaScript から直接これを行うことはできません。
したがって、これを行いたい場合は、Web サーバーまたは同様のものを介してリクエストを「リレー」する必要があります。次の PHP スクリプトを使用してそれを行い、JavaScript を介してリクエストを PHP スクリプトにポストします。最後に、OAuth を使用して自分自身を認証する必要があります。
$url = "http://www.google.com/fusiontables/api/query";
$relay = new PostRelay($url,$_POST);
echo $relay->relay();
そしてクラス PostRelay でメソッドrelay()
が定義され、$_POST
投稿されたすべてのデータを保持します (私のクラスでは で表されます$this->data
):
public function relay()
{
$url = $this->getUrl();
$this->curlHandler = curl_init($url);
curl_setopt($this->curlHandler, CURLOPT_POST, true);
curl_setopt($this->curlHandler, CURLOPT_RETURNTRANSFER, true);
curl_setopt($this->curlHandler, CURLOPT_TIMEOUT, 30);
curl_setopt($this->curlHandler, CURLOPT_FOLLOWLOCATION, 1);
if($this->data != null) {
curl_setopt($this->curlHandler, CURLOPT_POSTFIELDS, $this->getData());
}
$remote_answer = curl_exec($this->curlHandler);
if(curl_errno($this->curlHandler) != 0) {
$msgErrorNo = "cURL Errornumber: ".curl_errno($this->curlHandler);
$msgError = "cURL Error: ".curl_error($this->curlHandler);
throw new RemoteException($url,$msgErrorNo." ".$msgError);
}
return $remote_answer;
}
これは、新しい Trusted Tester Fusion Table API を使用して可能になります。ここにいくつかのコードを投稿しました:
http://groups.google.com/group/fusion-tables-api-trusted-testers/msg/126228f052eff30e?hl=en_US
新しいコードを使用するには、Trusted Tester である必要があります。Trusted Tester になるには、Trusted Tester API グループに参加するだけです。
http://groups.google.com/group/fusion-tables-api-trusted-testers?hl=en_US
<!DOCTYPE html>
<html>
<head>
<style>
#map_canvas { width: 600px;height: 550px; }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"type="text/javascript"></script>
<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 = 3385625;
function initialize() {
map = new google.maps.Map(document.getElementById('map_canvas'), {
center: new google.maps.LatLng(-30.127460619520974, -51.167964935302734),
zoom: 11,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
layer = new google.maps.FusionTablesLayer(tableid);
layer.setQuery("SELECT 'ENDERECO' FROM " + tableid);
layer.setMap(map);
}
//FUNÇÃO PARA ATIVAR OS FILTROS
function changeMap() {
var searchString = document.getElementById('search-string').value.replace(/'/g, "\\'");
if (!searchString) {
layer.setQuery("SELECT 'ENDERECO' FROM " + tableid);
return;
}
layer.setQuery("SELECT 'ENDERECO' FROM " + tableid + " WHERE 'TIPO' = '" + searchString + "'");
var queryUrlHead = 'http://www.google.com/fusiontables/api/query?sql=';
var queryUrlTail = '&jsonCallback=?';
var query = "SELECT COUNT() FROM " + tableid + " WHERE 'TIPO' CONTAINS IGNORING CASE '" + searchString + "'"
var queryurl = encodeURI(queryUrlHead + query + queryUrlTail);
var jqxhr = $.get(queryurl,
function(data){
try{
$('#count').html((data.table.rows[0][0]));
}
catch(err){
$('#count').html('0')
}
},
"jsonp");
}
</script>
</head>
<body onload="initialize();">
<div id="map_canvas"></div>
<div style="margin-top: 10px;">
<label>Qual o tipo?</label>
<select id="search-string" onchange="changeMap(this.value);">
<option value="">--Selecionar/Reset--</option>
<option value="Bar">Bar</option>
<option value="Comidas variadas">Comidas variadas</option>
<option value="Espaço de Cultura">Espaço de Cultura</option>
<option value="Hotel">Hotel</option>
<option value="Igreja">Igreja</option>
<option value="Museu">Museu</option>
<option value="Restaurante">Restaurante</option>
<option value="Shopping Center">Shopping Center</option>
<option value="Teatro">Teatro</option>
</select>
</div> </br>
<label>Quantidade:</label>
<span id='count'></span>
</body>
</html>
jQuery Ajaxを見てください:
例(AjaxというWebルートフォルダーにある.NET Webサービスを想定):
var Params = "{'myParamName': 'myParamValue'}";
$.ajax({
type: "POST",
url: "Ajax/MyWebService.asmx/MyWSMethod",
data: Params,
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (response) {
// Handle the response here as you need to...
},
failure: function () {
// Handle failure if needed
}
});