SR Office

ブログ
2013年6月24日

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

SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.all();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処理が実行される。