我在Symfony3中有一个小型应用程序,带有一个Google地图,显示了从数据库注入的一些位置。我想要实现的是在Google Maps的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"}
]"
还有我在树枝模板中的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技能很差。
最终,我设法解决了这个问题,我使用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 %}
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句