Информационное окно Ionic ngMap не работает на устройстве

Я работал с замечательной директивой ngMap, созданной allenhwkim, но у меня возникли проблемы с маркерами, отображающими информационные окна на устройстве. Я пробовал разные способы вложения «data-tap-disabled = 'true'» и «scroll = 'false'» для разных элементов, но безуспешно.

Мне очень нравится модуль markercluster, который он собрал, поэтому я пытался положиться на него, так как нам нужно нанести несколько маркеров на большую площадь. В репозитории есть отличный пример с отображением магазинов по всему миру с использованием пользовательских директив, и при достаточном увеличении, чтобы увидеть один маркер, появляется информационное окно с некоторыми данными при запуске события клика. При тестировании из Хрома все работает, а при тестировании на андроид устройстве и эмуляторе 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);
});

style.css

div#map-container div[add-stuff-info] { position: absolute; дисплей: нет; верх: 5 пикселей; справа: 5 пикселей; внизу: 5 пикселей; 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 }

Кажется, я не могу понять проблему здесь. Одна вещь, которую я понял, это удаление this.element.css('display', 'block'); из директивы и тестирования из Chrome браузер, похоже, ведет себя так же, как устройство - карта смещается, когда отображается информационное окно...


person bl4design    schedule 26.03.2015    source источник
comment
У меня такая же проблема, если есть ответ пишите сюда.   -  person Edison Machado    schedule 28.03.2015
comment
Я только что нашел решение для своего случая, добавив scroll="false" data-tap-disabled="true" в файл ion-content.   -  person Edison Machado    schedule 28.03.2015