私は allenhwkim によって作成された素晴らしい ngMap ディレクティブを使用してきましたが、デバイスに情報ウィンドウを表示するマーカーに問題があります。さまざまな要素に対して「data-tap-disabled='true'」と「scroll='false'」をネストするさまざまな方法を試しましたが、うまくいきませんでした。
彼がまとめたmarkerclusterモジュールがとても気に入っているので、広い範囲に複数のマーカーをプロットする必要があるので、それに頼ろうとしています。リポジトリには、カスタム ディレクティブを使用して世界中の店舗をプロットした素晴らしい例があり、単一のマーカーが表示されるまで十分にズームすると、クリック イベントが発生したときに情報ウィンドウにデータが表示されます。Chrome からテストする場合はすべて機能しますが、Android デバイスと iOS エミュレーターでテストする場合、情報ウィンドウは表示されません。しかし、情報ウィンドウが表示されるはずのように(Chromeからのテストのように)、デバイス上で画面/マップがシフトするため、クリックが登録されているようです。
myDirective.js
.directive('stuffInfo', function(SomeData) {
var StuffInfo = function(s, e, a) {
this.scope = s;
this.element = e;
this.attrs = a;
this.show = function(stuffId) {
this.element.css('display', 'block');
var showStuff = SomeData.getDataStuff(stuffId);
var someMoreStuff = showStuff.stuff_users;
s.someMoreStuff = someMoreStuff;
this.s.$apply();
}
this.hide = function() {
this.element.css('display', 'none');
}
};
return {
templateUrl: '/templates/stuff-info.html',
link: function(scope, e, a) {
scope.gameInfo= new GameInfo(scope, e, a);
}
}
})
map.html
<div id="map-container">
<map zoom="12" center="[34.784426, -92.333411]" disable-default-u-i="true">
</map>
<div add-stuff-info="" class="custom-control">Add Stuff</div>
</div>
コントローラーはクリックリスナーをアタッチします
var marker = new google.maps.Marker(stuff);
google.maps.event.addListener(marker, 'click', function() {
$scope.stuff = this;
map.setCenter(this.getPosition());
$scope.stuffInfo.show($scope.stuff._id);
});
スタイル.css
div#map-container div[add-stuff-info] { 位置: 絶対; 表示: なし; 上: 5px; 右: 5px; 下: 5px; width: 40% } div#map-container div[add-stuff-info] a.hide-link { float:right } div#map-container div[add-stuff-info] table { width: 100% } div# map-container div[add-stuff-info] table td { text-align: left; パディング: 5px; ボーダー: 1px ソリッド #ccc }
ここで問題を理解できないようです。私が気づいたことの1つは、 this.element.css('display', 'block'); を削除するときです。Chrome からのディレクティブとテストから、ブラウザはデバイスのように動作するようです - 情報ウィンドウが表示されると、マップがシフトします...