个人中心
gpt4 book ai didi

javascript - PHP、Javascript 和 Twig 模板

转载 作者：行者123 更新时间：2023-11-30 17:24:04 25 4
gpt4 key购买 nike

我有这段代码可以在谷歌地图上显示点，当我将信息从我的 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 & render template
echo $template->render(array (
'pageTitle' => 'Map Locations',
'locations' => $locations
));

echoing $locations 返回这个:[ " field 1","53.301624","-1.923434"],[ " field 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>

请帮忙....

最佳答案

问题是您正在创建一个 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 数组数组。就这么简单。

关于javascript - PHP、Javascript 和 Twig 模板，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24608816/

25 4 0
文章推荐： javascript - chrome 扩展程序中的数据未从弹出窗口传递到背景
文章推荐： javascript - Ace 编辑器 (javascript) : Triggering a tab press event for Ace Editors event handlers (not just inserting '/t' or spaces)
文章推荐： javascript - 如何嵌套一组项目，将它们除以第一个值？
文章推荐： javascript - 如何向div添加平滑滚动
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com