2

Airbnbや食べログのように
https://www.airbnb.jp/s/%E4%BA%AC%E9%83%BD--%E6%97%A5%E6%9C%AC
http://tabelog.com/en/tokyo/A1301/A130101/rstLst/

地図と一覧の表示をリンクさせて、一覧リストをhoverで格闘するマーカーの位置へ画面移動等はどのようにしているのでしょうか?
マーカー一覧をマップに表示する所までは問題なくできたのですが、その後の画面移動をどのように実装していけば良いのか分からずに居ます。

どなたか似たような実装経験がおありの方、ご教授いただけれればと思います。
宜しくお願いいたします。

1 件の回答 1

3

食べログのソースを読みましたが、そんなに特別な処理はしていません。
下のようなマーカーオブジェクトの作成が肝でしょうか。

    var markerObject = {
      id: $info.attr('data-id'),
      marker: marker,
      info: infowindow,
      iconType: iconType,
      vacancy: vacancy,
      isOpen: false,
      infoOpen: function(){
        this.isOpen = true;
        this.marker.setIcon(activeIcons[this.iconType][this.vacancy]);
        this.info.open(map, this.marker);
      },
      infoClose: function(){
        this.isOpen = false;
        this.marker.setIcon(icons[this.iconType][this.vacancy]);
        this.info.close();
      }
    };

こういうオブジェクトさえ作ってしまえば、左のリストへのホバーイベントに応じて対応するオブジェクトのinfoOpen()メソッドを呼ぶだけです。
地図上でドラッグ移動した時の動きについては、dragendイベント時に現在位置を取得し、それを元にajaxリクエストで画面内に収まるマーカーを取得・再描画しています。
ちょっとご質問の範囲が広いと思いましたので、この辺りの処理についてはより具体的な質問を別で立てられるのが良いと思います。

1
  • ありがとうございました。イメージは掴めましたので、一度こちらで実装した後、ドラッグイベントについてさらに調べてみます。
    – user76333
    Commented 2015年8月17日 0:32

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。