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は、あなたの自然な選択です。

アップデート：

OK、あなたがすべきことは、後で変更される最初の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_latitudesome_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/キーを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キーを使用してMapsAPIを含めることを忘れないでください。

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 に答える