I'm very desperate about this situation because I've spent over 3 days trying to find my mistake in this code.
我对这种情况非常绝望,因为我花了3天时间试图在这段代码中发现我的错误。
My application should retrieve some clients geo coordinates from database via my controller and it should return a JSON with the coordinates to be plot in the view as markers on a Google Map div.
我的应用程序应该通过我的控制器从数据库中检索一些客户端地理坐标,它应该返回一个JSON,其坐标要在视图中绘制为Google Map div上的标记。
But when I run the application nothing happen, only my form loads, but the Google Map does not show, consequently the markers doesn't as well.
但是,当我运行应用程序时,没有任何事情发生,只有我的表单加载,但谷歌地图没有显示,因此标记不一样。
This is my code: I have a CakePHP controller method which returns a JSON response just fine(I've checked in Chrome Console).
这是我的代码:我有一个CakePHP控制器方法,可以很好地返回JSON响应(我在Chrome控制台中检查过)。
Code:
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))));
}
}
Then I have the webpage with the Ajax Request:
然后我有一个带有Ajax请求的网页:
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');
}
And in my view: 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)) ?>
在我看来:index.ctp Html-> image(“open-search.png”,array('id'=>'open-search','class'=>'divlink')); ?> Html-> link($ this-> Html-> image(“clear-search.png”,array('class'=>'divlink')),“#emps”,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>
This should work fine since I always got a jqXHR.readystate = 4 and a SERVER STATE = 200, but my page does not load the map.
这应该工作正常,因为我总是有一个jqXHR.readystate = 4和一个SERVER STATE = 200,但我的页面没有加载地图。
Some screenshots of my application:
我的应用程序的一些截图:
http://dl.dropbox.com/u/67445902/server_status_response.png
http://dl.dropbox.com/u/67445902/loaded_app.png
After a long time debbuging it I think it is a problem with the Ajax callback(success), but I can't affirm certainly about it.
经过很长时间的重新调整后,我认为这是Ajax回调(成功)的一个问题,但我无法肯定它。
Any help about It would be very nice.
任何关于它的帮助都会非常好。
Note: Sorry if I got something wrong in my English. I'm a brazilian and I know just a little bit of English.
注意:如果我的英语出错,请抱歉。我是巴西人,我只懂一点英语。
UPDATE
I've achieved to got this thing working. I had to create a new template with nothing inside the body but,
我已经取得了成功。我不得不创建一个没有任何内部的新模板,但是,
<? echo $this->fetch('content'); ?>
I really dont't know why but, it worked. If someone knows why or at least have a clue. Please tell me.
我真的不知道为什么,但它有效。如果有人知道为什么或至少有一个线索。请告诉我。
1 个解决方案
#1
0
I've discovered that all of this was happening because of an css error, when I set the height of map-canvas div the map shown up.
我发现所有这一切都是因为css错误而发生的,当我设置map-canvas div的高度显示的地图时。
The css code to map-canvas and other elements are:
map-canvas和其他元素的css代码是:
#map_canvas label{width:auto; display:inline; height: 900px; /*Your height here*/}
#map_canvas img{max-width:none}
.gmaps label{width:auto; display:inline}
.gmaps img{max-width:none}
And set a fixed value to the parent div of map-canvas or to map-canvas, like:
并将一个固定值设置为map-canvas的父div或map-canvas,如:
<div id="map_canvas"></div>
#1
0
I've discovered that all of this was happening because of an css error, when I set the height of map-canvas div the map shown up.
我发现所有这一切都是因为css错误而发生的,当我设置map-canvas div的高度显示的地图时。
The css code to map-canvas and other elements are:
map-canvas和其他元素的css代码是:
#map_canvas label{width:auto; display:inline; height: 900px; /*Your height here*/}
#map_canvas img{max-width:none}
.gmaps label{width:auto; display:inline}
.gmaps img{max-width:none}
And set a fixed value to the parent div of map-canvas or to map-canvas, like:
并将一个固定值设置为map-canvas的父div或map-canvas,如:
<div id="map_canvas"></div>