1

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

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

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

如何做到这一点？

阿贾克斯？条件布局？

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

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

4

1 回答 1

2

您可以有一个单独的模板来打印对象映射，并且正如您所猜测的那样，这必须使用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，其中每个方法调用都描述得很好

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

希望这会有所帮助:)

于 2012-11-21T18:40:23.593 回答