Добавление обработчика событий по щелчку, который использует метод объекта [предоставляется CodePen] - PullRequest
Новая
       2

Добавление обработчика событий по щелчку, который использует метод объекта [предоставляется CodePen]

0 голосов
/ 26 сентября 2019

Я пытаюсь создать класс javascript-оболочки для листовки.Мне нужно привязать события щелчка к карте (и рядом с кнопками внутри всплывающих окон), и я, честно говоря, понятия не имею, как это сделать.Может ли кто-нибудь дать некоторые рекомендации.Я не могу заставить метод класса selectorClick () работать вообще.Я должен быть в состоянии передать параметры также.Я был бы признателен за любую помощь, которую вы могли бы предоставить.

Код @ https://codepen.io/hendr1x/pen/GRKLjrW

class Map {
    self = this;
    name = '';
    elem;
    theme = 'http://b.tile.openstreetmap.fr/osmfr/{z}/{x}/{y}.png';

    constructor(name) {
        self.name = name;
        self.elem = L.map(name).fitWorld().zoomIn();
        L.tileLayer(this.theme, {
            attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors',
            maxZoom: 18,
        }).addTo(self.elem);
    }

    selector(url, message) {
        self.elem.on("click", self.selectorClick(url, message));
    }

    selectorClick(url, message) {
        alert(message);
    }
}
var mapMap = new Map('map');
mapMap.selector('/index.php', 'test message');

РЕДАКТИРОВАТЬ:

Позвольте мне объяснить, что приведенный мной пример снял много сложностииз моей реальной ситуации, потому что я храню много на сервере данных .... так что для того, что мы смотрим на текущий, у меня есть что-то вроде этого в моем контроллере 

$this->c->map->init('mapElem');
$this->c->map->selector('/example/submit/index.php', 'You clicked this example');

which eventually echo's the following

echo "window." . $name . "Map = new Map('" . $name . "');";
echo $name . "Map.selector('" . $url . "', '" . $message . "');";

Так что с этим в уме япытаясь запустить столько кода через внешний файл js и отправить все динамические значения, как я его использую (как я делал выше).Поэтому, чтобы ответить на ваш вопрос, мне нужно передать URL-адрес и сообщение, чтобы при нажатии на карту у меня были данные для правильного создания всплывающего окна.

Ответы [ 2 ]

1 голос
/ 26 сентября 2019

Существует множество способов справиться с чем-то подобным. Все зависит от того, чего вы хотите достичь.

Какие параметры вы хотите передать методу selectorClick?Что вы хотите сделать с selectorClick? 

class Map {
  constructor(id) {
    this.elem = L.map(id).fitWorld().zoomIn();
    this.name = id;
    this.theme = "http://b.tile.openstreetmap.fr/osmfr/{z}/{x}/{y}.png";
    this.url = "";
    this.message = "";
    
    this.selectorClick = this.selectorClick.bind(this);
    this.elem.on("click", this.selectorClick);
    
    L.tileLayer(this.theme, {
      attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors',
      maxZoom: 18
    }).addTo(this.elem);
  }
  
  selector(url, message) {
    this.url = url;
    this.message = message;
  }

  selectorClick(event) {//<--- event is automatically passed in because of the 'onclick' handler
    let location = event.latlng;
    alert(`POST DATA HERE:\n\n${JSON.stringify(location, null, 2)}`)
  }
}

const mapMap = new Map("map");
mapMap.selector("/index.php", "test message");
#map { height: 180px; }
<html>

<head>
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css" integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==" crossorigin="" />
  <script src="https://unpkg.com/leaflet@1.5.1/dist/leaflet.js" integrity="sha512-GffPMF3RvMeYyc1LWMHtK8EbPv0iNZ8/oTtHPx9/cc2ILxQ+u905qIwdpULaqDkyBKgOaB57QTMg7ztg8Jm2Og==" crossorigin=""></script>
</head>

<body>
  <div style="text-align:center;">
    <h2>Click Anywhere On Map</h2>  
  </div>
  <div id="map"></div>
  </div>
</body>

</html>
0 голосов
/ 26 сентября 2019

Назначение self = this; в теле класса фактически устанавливает self область действия, в которой определен класс, вместо области действия this, которую вы ожидаете.Если вы проверите значение в своем коде, вы увидите, что это на самом деле объект окна.

Попробуйте использовать this вместо self.

Редактировать:

Вам также нужно будет предоставить функцию прослушивателю кликов.Попробуйте: this.elem.on("click", () => self.selectorClick(url, message));

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...