1

我对这种情况感到非常绝望,因为我花了 3 天多的时间试图在这段代码中找到我的错误。

我的应用程序应该通过我的控制器从数据库中检索一些客户端地理坐标,并且它应该返回一个 JSON,其中包含要在视图中绘制的坐标作为 Google Map div 上的标记。

但是当我运行应用程序时,什么也没发生,只有我的表单加载,但谷歌地图没有显示,因此标记也没有显示。

这是我的代码:我有一个 CakePHP 控制器方法,它可以很好地返回 JSON 响应(我已经在 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 请求的网页:

         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 和 SERVER STATE = 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'); ?>

我真的不知道为什么,但是,它奏效了。如果有人知道原因或至少有线索。请告诉我。

4

1 回答 1

0

当我设置地图显示的地图画布 div 的高度时,我发现所有这一切都是由于 css 错误而发生的。

映射画布和其他元素的 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}

并为 map-canvas 的父 div 或 map-canvas 设置一个固定值,例如:

         <div id="map_canvas"></div>
于 2013-09-26T11:41:58.340 回答