Question

我在Symfony3中有一个小应用程序，其中有一个谷歌地图，显示从数据库注入的一些位置。我想要实现的是在谷歌地图的infoWindows内放置一个链接到每个位置页面。位置页面的通配符是：

location/{id}

因此<a>代码href应如下所示：

<a href="{{ path('location', {'id': location.id }) }}">

这是包含所有数据的JSON：

"[
    {"id":72,"name":"Stintino","lat":"40.94013320","lng":"8.223588900000"},
    {"id":73,"name":"Cagliari","lat":"39.22384110","lng":"9.121661300000"},    
    {"id":74,"name":"La maddalena","lat":"41.21655380","lng":"9.404712200000"},
    {"id":75,"name":"Sassari","lat":"40.72592690","lng":"8.555682600000"},    
    {"id":76,"name":"Oristano","lat":"39.90618200","lng":"8.588386300000"},    
    {"id":77,"name":"Spiaggia-del-oetto","lat":"39.20861110","lng":"9.169166700000"}
]"

我在twig模板中的javascript代码：

    {% extends 'base.html.twig' %}
{% block content %}
{% block javascripts%}
<script src="{{ asset('bundles/fosjsrouting/js/router.js') }}"></script>
<script src="{{ path('fos_js_routing_js', { callback: 'fos.Router.setData' }) }}"></script>
<script type="text/javascript">     


    var locations = JSON.parse('{{ locations | raw }}');
    console.log(locations);
    var map = new google.maps.Map(document.getElementById('wsMap'), {
      zoom: 7,
      center: new google.maps.LatLng(40.0562194, 7.8577928),
      disableDefaultUI: true,
      scrollwheel: false,
      draggable: true,
    });
    var infowindow = new google.maps.InfoWindow();
    var marker, i;

    for (i = 0; i < locations.length; i++) {
        marker = new google.maps.Marker({
            position: new google.maps.LatLng(locations[i]['lat'], locations[i]['lng']),
            map: map,
            title: locations[i]['name']
        });
        var idloc = locations[i]['id'];
        var contentString = Routing.generate("location", { id: idloc });
        var url = '<a href="'+contentString+'">link</a>';
        alert(url);
        google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
            infowindow.setContent(url);
            infowindow.open(map, marker);
            }
        })(marker, i));
    }

</script>
{% endblock %}
<div id="wsMap" style="width: 100%; height:800px"></div>

{% endblock %}

你知道如何连接所有的字符串和变量来正确呈现infoWindows中的链接吗？

修改

添加FOSJsRoutingBundle和routing.generate函数后，我只得到地图所有信息窗口中生成的最后一条路径。但在警报窗口，我得到了所有的路线！（见上面编辑的代码）。不幸的是，我的javascript技能很差......

Answer 1

所有其他代码看起来都很好Salv Ric。您只需要在Twig中使用~代字号进行连接。我认为这只是一行：

var contentString = '<a href="{{path ("location", {"id": '
                      ~ id ~ ' }) }}">' ~ locations[i]['name'] ~ '</a>';

你可以尝试看看结果吗？我把回车放进去，在把你的报价括起来并在下一行使用波浪号时就可以了。

Answer 2

最后我设法解决了这个问题，我使用FOSJsRoutingBundle将symfony路由暴露给javascript，基本上我必须将变量 url 添加到javascript侦听器函数中。所以这是我的工作代码：

{% extends 'base.html.twig' %}
{% block content %}
{% block javascripts%}
<script src="{{ asset('bundles/fosjsrouting/js/router.js') }}"></script>
<script src="{{ path('fos_js_routing_js', { callback: 'fos.Router.setData' }) }}"></script>
<script type="text/javascript">     


    var locations = JSON.parse('{{ locations | raw }}');
    console.log(locations);
    var map = new google.maps.Map(document.getElementById('wsMap'), {
      zoom: 7,
      center: new google.maps.LatLng(40.0562194, 7.8577928),
      disableDefaultUI: true,
      scrollwheel: false,
      draggable: true,
    });
    var infowindow = new google.maps.InfoWindow();
    var marker, i;

    for (i = 0; i < locations.length; i++) {
        marker = new google.maps.Marker({
            position: new google.maps.LatLng(locations[i]['lat'], locations[i]['lng']),
            map: map,
            title: locations[i]['name']
        });
        var idloc = locations[i]['id'];
        var contentString = Routing.generate("location", { id: idloc });
        var url = '<a href="'+contentString+'">'+ locations[i]['name'] +'</a>';
        google.maps.event.addListener(marker, 'click', (function(marker, i, url) {
        return function() {
            infowindow.setContent(url);
            infowindow.open(map, marker);
            }
        })(marker, i, url));
    }

</script>
{% endblock %}
<div id="wsMap" style="width: 100%; height:800px"></div>

{% endblock %}

在谷歌地图infowindow Symfony动态通配符

2 个答案: