Question

我有一个带有左侧边栏的布局模板，其中我将位置传递实体的信息显示为数组。

同样在这个模板中，我展示了一个包含所有这些位置的对象Map。

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

如何实现这一目标？

的Ajax？有条件的布局？

我读过这篇文章，但我不明白如何解决我的问题：http://twig.sensiolabs.org/doc/recipes.html#overriding-a-template-that-also-extends-itself

PD：我正在使用Twig模板和Symfony2

Answer 1

您可以使用单独的模板打印对象图，正如您所猜测的那样，必须使用AJAX完成此操作。您可以传递要在地图上显示的数据（不是id，因为您不想再次查询数据库），控制器将返回格式化的HTML。

然而，这在我看来有点矫枉过正。我总是会考虑使用JS（使用可选框架）来交换侧边栏的内容和Map对象。

这取决于您使用的是哪个地图API 。如果可以通过JS进行控制，我将不会再看了。它不可能，AJAX是你自然的选择....

UPDATE：

好的，你应该做的是创建稍后将被修改的初始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），您可以将click事件绑定到这些位置链接：

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>）带到LatLng对象的id / key，例如：

// 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都说得很好

请记住，在加载所有内容之前不要执行任何代码。

希望这有点帮助：）

使用Twig渲染条件模板

1 个答案:

UPDATE：