交互式地图，如何从地图标记的弹出窗口到 symfony 中的模板创建 link

Question

我想制作交互式地图。例如，我的地图显示了法国的攀岩地点。我希望地图站点标记的弹出窗口将我引向该站点的描述性模板。我的项目在 symfony 中。我进行如下操作。在 index.htmll.twig 中，我将地图粘贴到 javascript 标签中。我尝试通过 twig 中的 javascript 脚本在我的数据库中的升级站点的变量 'sites' 上循环。但目前它不起作用。这是 index.html.twig:

中脚本的代码

<script>
    //definiton de la variable site dans le script
    var site = {{sites}}

    //on initialise la carte
    var carte = L.map('macarte').setView([48.852969, 2.349903], 5);
    //on charge les tuiles
    L.tileLayer('https://{s}.tile.openstreetmap.fr/osmfr/{z}/{x}/{y}.png', {
            // Il est toujours bien de laisser le lien vers la source des données
            attribution: 'données © <a href="//osm.org/copyright">OpenStreetMap</a>/ODbL - rendu <a href="//openstreetmap.fr">OSM France</a>',
            minZoom: 1,
            maxZoom: 20
        }).addTo(carte);
    
     var icone = L.icon({
                iconUrl:"../img/pointeur-de-carte.png",
                iconSize: [50, 50],
                iconAnchor: [25, 50],
                popupAnchor: [-2, -44],
            });

    // on parcours les différents sites
               
    for ( site in sites) {
       
            // Nous définissons l'icône à utiliser pour le marqueur, sa taille affichée (iconSize), sa position (iconAnchor) et le décalage de son ancrage (popupAnchor) 
            //on crée un marqueur et on lui donne un popup
            var marqueur = L.marker([sites[site].lat, sites[site].lon],{icon:icone}).addTo(carte);
            //marqueur.bindPopup('<h3>sites</h3>');
            //marqueur.bindPopup(site);
                         
            marqueur.bindPopup(<a href="{{ path('site_show', {'id':sites.id}) }}">site</a>);

            
           // markerClusters.addLayer(marker); // Nous ajoutons le marqueur aux groupes
            //markerClusters.push(marqueur);
        }
                          
</script>

我有以下错误：模板呈现期间抛出异常（“注意：数组到字符串的转换”）。

twig 中的站点转储正在运行。我不知道将 __toString 放在哪里才能转换为字符串。

你也可以找到部分数据库的图片。

在控制器中有这个：

/**
 * @Route("/", name="site_index", methods={"GET"})
 */
public function index(SiteRepository $siteRepository): Response
{
    return $this->render('site/index.html.twig', [
        'sites' => $siteRepository->findAll(),
       
        
    ]);
}

谢谢。迭戈

Answer 1

本部分：

var site = {{sites}}

你的sites是一个数组。您应该首先序列化此变量。您可以使用 Symfony 5.3 中新的序列化过滤器来做到这一点：https://symfony.com/blog/new-in-symfony-5-3-twig-serialize-filter

var site = {{ sites|serialize('json') }}

如果您还没有使用 Symfony 5.3，您应该使用 json_encode 和 raw 过滤器：

var site = {{ sites|json_encode()|raw }}

交互式地图，如何从地图标记的弹出窗口到 symfony 中的模板创建 link

interactive map, how to create a link from a popup of a marker of the map to a template in symfony

javascript

php

symfony