私はこのコードの間違いを見つけるために3日以上を費やしたので、この状況について非常に必死です。
私のアプリケーションは、コントローラーを介してデータベースからいくつかのクライアントの地理座標を取得する必要があり、GoogleMapdivのマーカーとしてビューにプロットされる座標を含むJSONを返す必要があります。
しかし、アプリケーションを実行しても何も起こらず、フォームのみが読み込まれますが、Googleマップが表示されないため、マーカーも表示されません。
これは私のコードです：JSON応答をうまく返すCakePHPコントローラーメソッドがあります（Chromeコンソールでチェックしました）。
コード：
class ClientsController extends AppController {
public $helpers = array('Js'=>array('Jquery'), 'GoogleMap', 'Html', 'Form');
public $components = array('RequestHandler');
public function loadJsonMarkers() {
$conditions = array(
'not' => array('Client.geoloc' => null),
'geoloc !=' => '(-1,-1)'
);
if ($this->RequestHandler->isAjax()) {
$clients = $this->Client->find('all', array(
'conditions' => $conditions,
'fields' => array('Client.geoloc'),
'recursive' => -1
));
$this->header('Content-Type: application/json; Charset=UTF-8');
return new CakeResponse(array('type'=> 'json', 'body' => json_encode(array('clients' => $clients))));
}
}
次に、Ajaxリクエストを含むWebページがあります。
function mapCaller(sentData)
{
$.ajax({
url: 'clients/loadJsonMarkers',
accepts: 'json',
type: 'POST',
data: sentData,
dataType: 'json',
error: function(xhr,status,err){
alert("DEBUG: status"+status+" \nError:"+err);
},
success: function(transport){
var markers = new Array();
for(var i in transport.clients){
var latlng = transport.clients[i].Client.geoloc.replace("(", "");
latlng = latlng.replace(")", "");
latlng = latlng.split(',');
markers.push(new google.maps.LatLng(parseFloat(latlng[0]),parseFloat(latlng[1])));
}
plotMap(markers);
$('#map-loading').fadeOut('slow');
},
complete: function(){
console.log(data);
console.log(sentData);
}
});
function plotMap(markers)
{
var mapOptions = { mapTypeId: google.maps.MapTypeId.ROADMAP };
var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
var markersCondensed = new Array();
var bounds = new google.maps.LatLngBounds();
$.each
(markers,
function(key, value){
var marker = new google.maps.Marker({ position: value });
markersCondensed.push(marker);
bounds.extend(value);
}
);
var mcOptions = {gridSize: 50};
var markerCluster = new MarkerClusterer(map, markersCondensed, mcOptions);
if (markers.length > 0)
map.fitBounds(bounds);
else
$('#map-no-results').fadeIn('slow');
}
そして私の見解では：index.ctp Html-> image（ "open-search.png"、array（'id' =>'open-search'、'class' =>'divlink'））; ？> Html-> link（$ this-> Html-> image（ "clear-search.png"、array（'class' =>'divlink'））、 "#maps"、array（'escape' => false ））？>
<div id="search-box">
<?= $this->Html->image("hide-search.png",array('id'=>'close-search', 'class'=>'divlink')); ?>
<div class="form">
<?= $this->Form->create('User',array('action'=>'filter')); ?>
<fieldset>
<legend>Vendas</legend>
<fieldset class="sub-fieldset"> <?php //TODO define style for ?>
<legend class="sub-legenda">Data da venda</legend>
<?= $this->Form->input('Sale.0.sale_date_min', array('label'=>'A partir do dia:', 'type'=>'date')); ?>
<?= $this->Form->input('Sale.0.sale_date_max', array('label'=>'Até o dia', 'type'=>'date')); ?>
</fieldset>
<fieldset class="sub-fieldset">
<legend class="sub-legenda">Total da venda</legend>
<?= $this->Form->input('Sale.0.sale_total_min', array('label' => 'Valor mínimo', 'class' => 'money')); ?>
<?= $this->Form->input('Sale.0.sale_total_max', array('label' => 'Valor máximo', 'class' => 'money')); ?>
</fieldset>
</fieldset>
<fieldset>
<legend>Clientes</legend>
<?= $this->Form->label('Client.sex', 'Sexo:'); ?>
<?= $this->Form->checkbox('Client.sex', array('value'=> 'm')); ?>
<?= $this->Form->checkbox('Client.sex', array('value'=> 'f')); ?>
<fieldset class="sub-fieldset">
<legend class="sub-legenda">Faixa etária</legend>
<?= $this->Form->input('Client.age_min', array('label' => 'Idade mínima')); ?>
<?= $this->Form->input('Client.age_max', array('label' => 'Idade máxima')); ?>
</fieldset>
<fieldset class="sub-fieldset">
<legend class="sub-legenda">Renda</legend>
<?= $this->Form->input('Client.income_min', array('label' => 'Renda mínima', 'class' => 'money')); ?>
<?= $this->Form->input('Client.income_max', array('label' => 'Renda máxima', 'class' => 'money')); ?>
</fieldset>
</fieldset>
</div>
</div>
<div id="map_canvas"></div>
<div id="map-loading" class="notice-box">
<p><?= $this->Html->image("ajax-loading.gif"); ?>Carregando o mapa...</p>
</div>
<div id="map-no-results" class="notice-box">
<p><a href="maps">SEM RESULTADOS</a></p>
</div>
私は常にjqXHR.readystate=4とSERVERSTATE= 200を取得しているので、これは正常に機能するはずですが、私のページはマップをロードしません。
私のアプリケーションのいくつかのスクリーンショット：
http://dl.dropbox.com/u/67445902/server_status_response.png
http://dl.dropbox.com/u/67445902/loaded_app.png
長い間それをデバグした後、それはAjaxコールバック（成功）の問題だと思いますが、私はそれについて確かに断言することはできません。
それについての助けはとてもいいでしょう。
注：英語で何か問題が発生した場合は申し訳ありません。私はブラジル人で、英語を少し知っています。
アップデート
私はこのことを機能させることを達成しました。本体の中に何もない新しいテンプレートを作成する必要がありましたが、
<? echo $this->fetch('content'); ?>
理由はよくわかりませんが、うまくいきました。誰かが理由を知っているか、少なくとも手がかりを持っている場合。教えてください。