javascript - 在 Twig 中使用 JS 变量

Question

我需要在 Twig 中使用 JS 变量。

我已经找到this attempt我在下面的代码中尝试了它，但我没有工作，整个 map 根本不会渲染。但如果我删除“var polylineCooperatives”和“polyline.setMap(map);”之间的部分，就会出现这种情况。

我的任务是从转弯内的经纬度数据点绘制折线。

我在下面发布了 map 的完整代码。

<script type="text/javascript">
        function initialize() {
               var mapOptions = {
                   center: new google.maps.LatLng({{ turn.pois[0].lat }}, {{ turn.pois[0].lon }}),
                   zoom: 9,
                   mapTypeId: google.maps.MapTypeId.ROADMAP
               };

               var map = new google.maps.Map(document.getElementById("map_canvas"),
               mapOptions);

               var i;
               var polylineCoordinates = new Array[];
               for (i = 0; i < {{ turn.pois }}; ++i) {
                   var lat = {{ turn.pois["PLACEHOLDER"].lat }};
                   var lon = {{ turn.pois["PLACEHOLDER"].lon }};
                   polylineCoordinates.push(new google.maps.LatLng(lat.replace("PLACEHOLDER", i), lon.replace("PLACEHOLDER", i)));
                   };
               var polyline = new google.maps.Polyline({
                   path: polylineCoordinates,
                   geodesic: true,
                   strokeColor: '#FF0000',
                   strokeOpacity: 1.0,
                   strokeWeight: 2
               });
               polyline.setMap(map);
               }

         google.maps.event.addDomListener(window, 'load', initialize);
</script>

此外，如果我的代码有遗漏或可以改进的地方，我真的很想在一般 JS 编码方面得到一些建议，我对 JS 还很陌生

编辑

我现在使用以下内容编辑了代码

var polylineCoordinates = [];                
for (i = 0; i < {{ turn.pois|length }}; ++i) {
                    var lat = {{ turn.pois[0].lat }};
                    var lon = {{ turn.pois[0].lon }};
                    polylineCoordinates.push(new google.maps.LatLng(lat.replace(0, i), lon.replace(0, i)));
                };

只是为了向将来会看到这个问题的人解释:我需要在{{turn.pois|length }}处添加|length，以便它将与整数进行比较代表集合“pois”中的所有元素。如果没有 |length 过滤器，我会与 Collection/objects 进行比较，这当然是行不通的。

此外，我需要删除“PLACEHOLDER”字符串，因为 Twig 会在 JS 开始运行之前就被解析。所以我需要给出一个合法的默认值，例如[0]。 (集合中的第一个元素)

map 现在正在渲染，但没有折线。我猜想 Replace() 不起作用。

编辑2

我刚刚检查了如果我使用虚拟数据，折线是否会绘制，所以我只是尝试了以下操作:

        var polylineCoordinates = [
            new google.maps.LatLng(54.180260, 12.098421),
            new google.maps.LatLng(54.180348, 12.198463),
            new google.maps.LatLng(54.256842, 12.324694),
            new google.maps.LatLng(54.328642, 12.468212)
        ];
        /*for (i = 0; i < {{ turn.pois|length }}; ++i) {
            var lat = {{ turn.pois[0].lat }};
            var lon = {{ turn.pois[0].lon }};
            polylineCoordinates.push(new google.maps.LatLng(lat.replace(0, i), lon.replace(0, i)));
        };*/

效果非常好!所以我的问题是用 JavaScript 中的 i 变量替换 [0] 的方法。如果需要的话我也可以发布生成的 JS 代码!

Answer 1

为什么需要在Twig中使用js变量？它很脏，在你的情况下它毫无用处。我建议在绘制折线之前使用ajax获取所有坐标。它会像:

 jQuery.ajax({
     url:    'http://example.com/getCoords',
     dataType: 'json'

     success: function(result) {
         //your array with coords;
         var polylineCoordinates = [];
                      console.log(result); //just to see what we have
                      $.each(result, function(i, item) {
                          polyineCoordinates = new google.maps.LatLng(item.lat, item.lng);
                      });
              },
     async:   false
});         

之后， - 你就可以画画了。