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

Posted 2023-02-16

【中文标题】交互式地图，如何在 symfony 中创建从地图标记的弹出窗口到模板的链接

【英文标题】：interactive map, how to create a link from a popup of a marker of the map to a template in symfony

【发布时间】：2021-09-23 06:55:46

【问题描述】：

我正在寻找制作交互式地图。例如，我的地图显示了法国的攀登地点。我希望地图站点标记的弹出窗口将我引向该站点的描述性模板。我的项目在 symfony 中。我进行如下。在 index.htmll.twig 中，我将地图粘贴到 javascript 标记中。我尝试通过树枝中的 javascript 脚本循环访问数据库中升级站点的变量“站点”。但目前它不起作用。下面是 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 才能使转换为字符串工作。

你也可以找到部分DB的图片。

在控制器中是这样的：

/**
 * @Route("/", name="site_index", methods="GET")
 */
public function index(SiteRepository $siteRepository): Response

    return $this->render('site/index.html.twig', [
        'sites' => $siteRepository->findAll(),
       
        
    ]);

谢谢。 迭戈

【参考方案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 

【讨论】：

您好，感谢您的回复。我尝试了 var site = sites|json_encode()|raw whitch 工作。但它给了我另一个错误：“键为“0、1、2”的数组的键“id”不存在。”在那种情况下，它找不到数组，显然它不再存在。有人建议我使用传单中的 goejson，您管理 geojson（可能在变量列表上，这取决于后面如何管理它），您将其插入脚本标签中。我仍然必须这样做......

但这是另一个问题，对吧？您没有在问题的代码中使用数组。

我尝试将数组与树枝中存在的 3 个对象 0、1、2 一起使用，但当我在脚本中循环时不再使用了

我不明白你的意思。我已经回答了你的问题，但现在你问的是另一个问题。

谢谢你，你给了一个很好的答案，但我仍然无法实现我的目标。但我想我找到了一个解决方案，在你的帮助下。我只需要努力。再次感谢您。