2013年6月24日月曜日

OpenLayerのMarkerイベントでAngularjsを使用する

Mapアプリ向けのjavascriptライブラリOpenLayersを使ってMapアプリを作っている。javascriptフレームワークはAngularjsを使用している。

この2つのライブラリ、フレームワークを使っているが、Dialog表示でハマってしまった。
マップにピンのようなマーカーを表示させ、マーカーがクリックされたら、Dialogを表示させたかった。

この場合は以下のようなコードになる。

イベントの設定
    var marker = new OpenLayers.Marker(lonLat, icon);
    marker.events.register('mousedown', marker, $scope.showDialog);

イベント
    $scope.showDialog = function(evt) {
        $scope.openDialog();
        $rootScope.$apply();  //これ大切!!!
        OpenLayers.Event.stop(evt);
    };

ここで大切なのは$rootScope.$apply();を呼ぶ事だ。 これによりAngularjsのdigestサイクルに制御が移り、非同期動作のDialog処理が実行される。

0 件のコメント:

コメントを投稿