Question

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

我已经找到this attempt并且我在下面的代码中尝试了它，但我没有工作，整个地图根本不会渲染。但是如果我删除＆＃34; var polylineCoordinates＆＃34;之间的部分呢？和＆＃34; polyline.setMap（map）;＆＃34;。

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

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

<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 }}添加|长度，以便它与代表集合中所有元素的intiger进行比较＃34;的POI＆＃34 ;.如果没有|长度过滤器，我会与收集/对象进行比较，这当然不会起作用。

此外，我需要删除＆＃34; PLACEHOLDER＆＃34; string因为在JS甚至开始运行之前很久就会解析Twig。所以我需要给出一个合法的默认值，比如[0]。（集合中的第一个元素）

地图现在正在渲染，但没有折线。我猜测replace（）不起作用。

EDIT2

如果我使用dummydata，我只是检查Polyline是否会绘制，所以我只是尝试了以下内容：

        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取出所有的coords。它会像：

 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
});

在此之后， - 你可以画画。

在Twig中使用JS变量

1 个答案: