Symfony 使用细枝渲染条件模板

我有一个带有左侧边栏的布局模板，在这里我以数组的形式显示位置传递实体的信息

同样在这个模板中，我显示了一个包含所有这些位置的对象贴图

我想点击侧边栏的某个位置，然后在同一模板上显示另一个对象映射，用该位置的信息替换上一个对象映射。将信息保留在侧栏中，而不是对数据库进行新的查询

如何做到这一点

阿贾克斯？条件布局

我读了这篇文章，但不明白如何解决我的问题：

---

PD：我使用的是Twig模板和Symfony2

您可以有一个单独的模板来打印对象地图，正如您所猜测的，这必须使用

AJAX

来完成。您将传递要在地图上显示的数据（不是id，因为您不想再次查询数据库），控制器将返回格式化的HTML

然而，在我看来，这似乎有点矫枉过正。我总是考虑做代码> js<代码>（可选框架），以便将侧栏的内容与<代码> map < /COD>对象互换。 这实际上取决于您使用的映射API。如果它可以通过

JS

控制，我就不会再看了。它不可能，那么，

AJAX

是您的自然选择

更新： 好的，您应该创建稍后将修改的初始贴图对象：

var theMap = null;

function initializeMap(){
    var mapOptions = {
    center: new google.maps.LatLng(some_latitude, some_longitude),
        zoom: 8, // goes from 0 to 18
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    theMap = new google.maps.Map(document.getElementById("map_canvas"),mapOptions);
    // you must have some element with ID = 'map_canvas'
}

某些纬度

和

某些经度

相当不重要，因为您很可能会在几分钟内设置新的坐标

现在假设（但一点也不重要）您使用了一些

JS

框架（我更喜欢

jQuery

），您可以将单击事件绑定到这些位置链接：

var onlyMarker = null;
$('.location').click(function(){
    var $t = $(this);
    var newLatLang = new google.maps.LatLng($t.attr('data-lat') ,$t.attr('data-lng'));

    if ( onlyMarker  == null ) {
        onlyMarker = new google.maps.Marker({
            position: newLatLang
            map: theMap,
            title:  $t.attr('title')
        });
     }else{
        onlyMarker.setPosition(newLatLang);
     }
});

现在，依赖HTML5的“data-*”attibutes并不是一个好主意，尤其是如果您使用任何其他更低版本，您很可能最终会得到无效的标记。解决方法是为链接（

这个链接基本上涵盖了我在这里描述的关键步骤，所以请研究一下，所有这些都应该很好地结合在一起

此外，如果您不确定如何从地图中检索某些内容，则应参考参考资料：
每个方法调用都描述得很好

记住，在加载所有内容之前，不要执行这些代码

希望这有点帮助：）
我正在PHP中使用谷歌地图API。我会尝试使用AJAX，但我不知道该怎么做，因为我不懂AJAX。啊，太巧了！我昨天晚上才开始尝试MapsAPI。不幸的是，至少在接下来的几天里，我可能无法帮助您，直到我对它有点熟悉为止，但我希望其他人能够；）好的，我昨晚在地图API上做了一些挖掘，我想我能帮助你。只要下班回来（格林尼治标准时间下午6点左右+1），如果没有人写答案，我会写；）没问题。我更新了我的答案，其中包括一些基本示例；）
// initially generated from `AJAX` or in `Twig` loop
var allLatlangs = [ 
    new google.maps.LatLngf(some_latitude, some_longitude),
    new google.maps.LatLngf(some_latitude, some_longitude),
    new google.maps.LatLngf(some_latitude, some_longitude),
];

$('.location').click(function(){
    var id = $(this).attr('id');
     var newLatLang = allLatLang(id);
     //....
     // everything else is the same 
     // ....
});

https://maps.googleapis.com/maps/api/js?key=API_KEY_HERE&sensor=true