我有一个带有左侧边栏的布局模板，其中我将位置传递的实体的信息显示为数组。
同样在这个模板中，我展示了一个包含所有这些位置的对象地图。
我想点击侧边栏的位置，然后在同一个模板上显示另一个对象地图，用该位置的信息替换之前的地图。将信息保留在侧边栏上，而不是对数据库进行新的查询。
如何做到这一点？
阿贾克斯？条件布局？
我读了这篇文章，但我不明白如何解决我的问题：http://twig.sensiolabs.org/doc/recipes.html#overriding-a-template-that-also-extends-itself
PD：我正在使用 Twig 模板和 Symfony2
【问题讨论】：
您可以有一个单独的模板来打印对象映射，正如您所猜测的，这必须使用AJAX 来完成。您将传递要在地图上显示的数据（不是 id，因为您不想再次查询数据库）并且控制器将返回格式化的 HTML。
但是，在我看来，这有点矫枉过正。我总是会考虑使用JS（带有可选框架），以便将侧边栏的内容与Map 对象交换。
这真的取决于您使用哪个地图 API。如果它可以通过JS 控制，我不会再看了。它不可能，那么，AJAX 是你的自然选择....
好的，你应该做的是创建稍后将修改的初始 Map 对象：
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'
}
some_latitude 和 some_longitude 相当不重要，因为您很可能会在稍后设置新坐标。
现在假设（但一点都不重要）您使用一些 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-*' 属性并不是一个好主意，特别是如果您使用任何其他更低的版本，您很可能会以无效标记告终。解决方法是让链接 (<a>) 携带 id/key 到 LatLng 对象，例如：
// 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
// ....
});
不要忘记包含带有正确 API 密钥的 Maps API：
https://maps.googleapis.com/maps/api/js?key=API_KEY_HERE&sensor=true
要获取有效的 API 密钥，请点击此链接：API KEY HOW-TO
此链接基本上涵盖了我在此处描述的关键步骤，因此请研究它，它应该很好地结合在一起。
此外，如果您不确定如何从地图中检索某些内容，您应该查阅参考资料： REFERENCE 每个方法调用都描述得很好
记住在加载所有内容之前不要执行任何代码。
希望这会有所帮助:)
【讨论】：