Nano Hash - криптовалюты, майнинг, программирование

Событие щелчка маркера не срабатывает для ui-gmap-marker в Map Controller

У меня есть приложение с контроллером для карты Google. Событие click не срабатывает, когда я запускаю его на своем телефоне. Однако событие щелчка срабатывает, когда я тестирую его на эмуляторе пульсации. Ниже находится страница карты и соответствующий контроллер.

<ons-toolbar>
<div class="left"><ons-back-button>Back</ons-back-button></div>
<div class="center page-title">Map MapController2</div>
</ons-toolbar>

<ui-gmap-google-map center="map.center" refresh="true" zoom="map.zoom" draggable="true">

    <ui-gmap-marker idkey="marker.id" ng-repeat="marker in map.markers" coords="marker" icon="marker.icon" click="onMarkerClicked()">
        <ui-gmap-window show="windowOptions" coords="marker" closeClick="closeClick">
            <div style="color: black">
        {{marker.title}}<br/>
        at {{marker}}
            </div>
        </ui-gmap-window>
    </ui-gmap-marker>

</ui-gmap-google-map>

// Map Controller
app.controller('MapController2', function($scope, $rootScope, $http) {
    var data = {};

    data.map = {
        zoom: 12,
        center: {
            latitude: 27.949,
            longitude: -81.958
        },
        markers: [
            {
                id: 1,
                icon: 'img/blue_marker.png',
                latitude: 27.949,
                longitude: -81.999,
                title: 'This is where you are asdf;lkj  asdf;lj  ;asdf;lkasf; ;jasdfpoiarwtonmsad'
            },
            {
                id: 2,
                latitude: 27.949,
                longitude: -81.958,
                title: 'Job Site'
            },
            {
                id: 3,
                icon: 'img/plane.png',
                latitude: 27.949,
                longitude: -81.94,
                title: 'Airport'
            }]
    };

    $scope.windowOptions = false;

    $scope.onMarkerClicked = function () {
        this.windowOptions = !this.windowOptions;
    };

    $scope.closeClick = function () {
        this.windowOptions = false;
    };

    $scope.map = data.map;
});

  • это гибридное приложение с: Ionic and Angular Material? если это так, то есть проблема с использованием любой версии материала ionic + angular v7.1 и выше, и ng-click не работает. https://github.com/angular/material/issues/1826 31.05.2015
  • Спасибо. Это Ionic и AngularJS. Я новичок в Ангуляре. Я использую щелчок вместо ng-click, если это имеет значение. Я построил свое приложение из шаблона, который не имеет той же проблемы, что и странно. 31.05.2015
  • Я не уверен, что у меня возникла та же проблема, что и у вас, но у меня был щелчок маркера, который в основном регистрировался в консоли, но тогда изменения не применялись в представлении. Я решил это, завершив функцию щелчка, запускаемую маркером, с помощью $scope.$apply(). 13.08.2016

Ответы:


1

Я нашел решение после долгих копаний. HTML, который я использую, приведен ниже. Я использую «ui-gmap-markers» (с буквой «s») вместо «ui-gmap-marker». Кроме того, мне пришлось инкапсулировать карту Google с помощью «data-tap-disabled="true"», чтобы она работала на телефоне.

<ons-page class="map" ng-controller="MapController2" sliding-menu-ignore="true">

    <ons-toolbar>
        <div class="left"><ons-back-button>Back</ons-back-button></div>
        <div class="center page-title">Map MapController</div>
    </ons-toolbar>

    <ui-gmap-google-map center="map.center" refresh="true" zoom="map.zoom" draggable="true" data-tap-disabled="true">

        <ui-gmap-window show="map.window.show" coords="map.window.model" options="map.window.options" closeClick="map.window.closeClick()">
            <div style="color: black">
                {{map.window.title}}
            </div>
        </ui-gmap-window>
        <ui-gmap-markers idkey="marker.id" models="map.markers" coords="'self'" doCluster="false" fit="'true'" icon="'icon'" events="map.markersEvents " options="'options'"></ui-gmap-markers>

    </ui-gmap-google-map>

</ons-page>

И тогда Контроллер выглядит так:

// Map Controller
    app.controller('MapController2', function($scope, $rootScope, $http) {
        var data = {};

        data.map = {
            zoom: 12,
            center: {
                latitude: 27.949,
                longitude: -81.958
            },
            markers: [
                {
                    id: 1,
                    icon: 'img/blue_marker.png',
                    latitude: 27.949,
                    longitude: -81.999,
                    title: 'This is where you are'
                },
                {
                    id: 2,
                    latitude: 27.949,
                    longitude: -81.958,
                    title: 'Job Site'
                },
                {
                    id: 3,
                    icon: 'img/plane.png',
                    latitude: 27.949,
                    longitude: -81.94,
                    title: 'Airport'
                }],
            markersEvents: {
                click: function(marker, eventName, model, arguments) {
                    console.log('Marker was clicked (' + marker + ', ' + eventName);//+', '+mydump(model, 0)+', '+mydump(arguments)+')');
                    $scope.map.window.model = model;
                    $scope.map.window.model = model;
                    $scope.map.window.title = model.title;
                    $scope.map.window.show = true;
                }
            },
            window: {
                marker: {},
                show: false,
                closeClick: function() {
                    this.show = false;
                },
                options: {}, // define when map is ready
                title: ''
            }
        };

        //$scope.window = false;

        $scope.onMarkerClicked = function (m) {
            //this.windowOptions = !this.windowOptions;
            console.log('Marker was clicked');
            console.log(m);
        };

        $scope.closeClick = function () {
            this.window = false;
        };

        $scope.map = data.map;

    });
02.06.2015
  • и вы можете указать смещение для ui-gmap-window с {pixelOffset: {width: 0, height: -40}} в атрибуте параметров, например 03.03.2016
  • Можем ли мы иметь plunkr для этого? 05.04.2016
  • Новые материалы

    Кластеризация: более глубокий взгляд
    Кластеризация — это метод обучения без учителя, в котором мы пытаемся найти группы в наборе данных на основе некоторых известных или неизвестных свойств, которые могут существовать. Независимо от..

    Как написать эффективное резюме
    Предложения по дизайну и макету, чтобы представить себя профессионально Вам не позвонили на собеседование после того, как вы несколько раз подали заявку на работу своей мечты? У вас может..

    Частный метод Python: улучшение инкапсуляции и безопасности
    Введение Python — универсальный и мощный язык программирования, известный своей простотой и удобством использования. Одной из ключевых особенностей, отличающих Python от других языков, является..

    Как я автоматизирую тестирование с помощью Jest
    Шутка для победы, когда дело касается автоматизации тестирования Одной очень важной частью разработки программного обеспечения является автоматизация тестирования, поскольку она создает..

    Работа с векторными символическими архитектурами, часть 4 (искусственный интеллект)
    Hyperseed: неконтролируемое обучение с векторными символическими архитектурами (arXiv) Автор: Евгений Осипов , Сачин Кахавала , Диланта Хапутантри , Тимал Кемпития , Дасвин Де Сильва ,..

    Понимание расстояния Вассерштейна: мощная метрика в машинном обучении
    В обширной области машинного обучения часто возникает необходимость сравнивать и измерять различия между распределениями вероятностей. Традиционные метрики расстояния, такие как евклидово..

    Обеспечение масштабируемости LLM: облачный анализ с помощью AWS Fargate и Copilot
    В динамичной области искусственного интеллекта все большее распространение получают модели больших языков (LLM). Они жизненно важны для различных приложений, таких как интеллектуальные..