Блог

Главная - Вопросы по программированию - Шаблоны PHP, Javascript и Twig

Шаблоны PHP, Javascript и Twig

#javascript #php #symfony #twig

#javascript #php #symfony #twig

Вопрос:

У меня есть этот код для отображения точек на карте Google, который я просто не могу заставить работать, когда я передаю информацию из моего PHP в мой шаблон Twig. Однако это прекрасно работает с массивом непосредственно в javascript. Пожалуйста, можете где-нибудь избавить меня от дергания за волосы и помочь мне.

PHP-код:

 // Create a list of items return from SQL
foreach ($mapdetails as $mapdetail){
if($locations!='') $locations.=','; 
$locations.='[
"'.$mapdetail['venue'].'"
,"'.$mapdetail['lat'].'"
,"'.$mapdetail['lng'].'"
]';    
}

// set template variables amp; render template
echo $template->render(array (
'pageTitle' => 'Map Locations',
'locations' => $locations
));

повторение $locations возвращает это:
[ «Место проведения 1″,»53.301624″ ,»-1.923434″ ],[ » Местопроведения 2″ ,»53.160526″ ,»-1.996968″ ]

ФРАГМЕНТ JAVASCRIPT:

Когда я использую эту строку в шаблоне, это не работает

var all = '[{{locations|json_encode()|raw}}]';

Когда я использую эту строку, она действительно работает 

 var all =  [[ "Venue 1" ,"53.301624" ,"-1.923434" ],[ "Venue 2","53.160526" ,"-1.996968"]];

ПОЛНЫЙ JAVASCRIPT

 <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=true"></script>

    <script>
        // Set the Map variable
        var map;

        function initialize(){ 
            var myOptions ={
              zoom: 9,
              mapTypeId: google.maps.MapTypeId.ROADMAP
            };

ЭТО НЕ РАБОТАЕТ, когда заменяется приведенной ниже строкой, которую оно выполняет

 var all = '[{{locations|json_encode()|raw}}]';

ЭТО ДЕЙСТВИТЕЛЬНО РАБОТАЕТ

 var all =  [[ "Venue 1" ,"53.301624" ,"-1.923434" ],[ "Venue 2","53.160526" ,"-1.996968"]];

console.log(all);

        var infoWindow = new google.maps.InfoWindow;
        map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);

        // Set the center of the map
        var pos = new google.maps.LatLng(53.25,-1.91);
        map.setCenter(pos);

        function infoCallback(infowindow, marker) { 
            return function() {
            infowindow.open(map, marker);
        };
   }      
   function setMarkers(map, all) {  
    for (var i in all) {                    
            var venue  = all[i][0];
            var lat   = all[i][1];
            var lng   = all[i][2];
            var latlngset;

            latlngset = new google.maps.LatLng(lat, lng);

            console.log(venue);
            console.log(lat);


            var marker = new google.maps.Marker({  
              map: map,  title: city,  position: latlngset  
            });
            var content = '';       

            var infowindow = new google.maps.InfoWindow();

              infowindow.setContent(content);

              google.maps.event.addListener(
                marker, 
                'click', 
                infoCallback(infowindow, marker)
              );
          }
        }     
        // Set all markers in the all variable
        setMarkers(map, all);
      };
      // Initializes the Google Map
      google.maps.event.addDomListener(window, 'load', initialize);
    </script>
  </head>
  <body>
    <div id="map_canvas" style="height: 500px; width: 800px;"></div>
  </body>
</html>

Пожалуйста, любая помощь….

Ответ №1:

Проблема в том, что вы создаете строку PHP:

 '[ "Venue 1","53.301624" ,"-1.923434" ],[ "Venue 2" ,"53.160526" ,"-1.996968" ]'

которые вы являетесь json_encoding (с добавлением кавычек и прочего для загрузки):

 var all = '[{{locations|json_encode()|raw}}]';

Результатом чего является что-то вроде этого, представляющее собой перепутанную строку Javascript, а не объект:

 var all = '["[ "Venue 1","53.301624"..."]';

Это и близко не то, что вы хотите. Вы просто хотите иметь PHP-массив, который затем вы json_encode:

 $locations = array_map(function (array $mapdetail) {
    return array($mapdetail['venue'], $mapdetail['lat'], $mapdetail['lng']);
}, $mapdetails);

В шаблоне:

 var all = {{ locations|json_encode|raw }};

Результат выглядит следующим образом:

 var all = [["Venue 1","53.301624","-1.923434" ],["Venue 2","53.160526","-1.996968"]];

который представляет собой массив массивов Javascript. Это так просто.

Комментарии:

1. Большое вам спасибо, единственная проблема, с которой я сталкиваюсь сейчас, заключается в том, что на карте отображается только 1 местоположение. При выгрузке $ locations я получаю: Array ([0] => Array ( [0] => Место проведения 1 [1] => 53.301624 [2] => -1.923434 ) [1] => Массив ( [0] => Место проведения 2 [1] => 53.160526 [2] => -1.996968 ) ) Я думаю, что javascript неправильно обрабатывает каждый элемент массива, мысли??

2. Извините, теперь разобрал. Искренне благодарю вас за это простое решение проблемы, которая сводила меня с ума.