Отображение всплывающего окна при наведении курсора мыши, а не при нажатии с помощью Leaflet?

37

Возможно ли в Leaflet, что всплывающее окно открывается при наведении мыши, а не при нажатии?

Это работает только для одного маркера за раз, но мне нужно это для большего количества маркеров:

marker.on('mouseover', function(e){
    marker.openPopup();
});

leaflet popup

— againstflow
источник

1

Если у вас есть два вопроса, пожалуйста, откройте две темы, чтобы на них можно было ответить отдельно.

— Подземье

43

Если вам нужно показать всплывающее окно для маркера, вы можете использовать метод markers bindPopup.

Тогда у вас будет больше контроля, и он будет автоматически привязан к вашему маркеру.

В приведенном ниже примере вы можете отобразить всплывающее окно при наведении мыши на пользователя и скрыть его при наведении мыши на пользователя:

        marker.bindPopup("Popup content");
        marker.on('mouseover', function (e) {
            this.openPopup();
        });
        marker.on('mouseout', function (e) {
            this.closePopup();
        });

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

— Томислав Муик
источник

4

Решение для сохранения всплывающего окна при наведении на него - jsfiddle.net/sowelie/3JbNY

— rob-gordon

9

Это поможет показать всплывающее окно при наведении курсора

marker.on('mouseover', function(e) {
  //open popup;
  var popup = L.popup()
   .setLatLng(e.latlng) 
   .setContent('Popup')
   .openOn(map);
});

— Суджеш Балан
источник

1

Благодарность! этот код помог мне в чем-то не связанном с этим вопросом.

— Аббафей

6

Это не специфичная для Leaflet проблема, а скорее вопрос Javascript.

Сохраните свои маркеры в коллекции, а затем привяжите openPopupк 'mouseover'событию для всех из них.

Например, с массивом:

var markers = getAllMarkers(); // up to you to implement, say it returns an Array<L.Marker>

for (var i = 0; i < markers.length; i++) {
    var currentMarker = markers[i];
    currentMarker.on('mouseover', currentMarker.openPopup.bind(currentMarker));
}

— MattiSG
источник

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

— MattiSG

Это не мой выбор, к сожалению. У меня есть маркеры, хранящиеся как новая L.MarkerClusterGroup с Leaflet MarkerCluster: var markers = new L.MarkerClusterGroup (); эта кодировка, которую вы написали, тоже подойдет?

— против потока

@againstflow Эмм, тогда ты должен изменить свой вопрос. Вы спрашиваете не только об открытии маркеров при наведении курсора, но и о том, как перебирать маркеры в L.MarkerClusterэкземпляре ... Мой ответ ясно показывает, как связать коллекцию всплывающих окон при наведении курсора Если вы хотите узнать, как получить коллекцию из кластера, это нечто другое.

— MattiSG

6

Если вы используете Leaflet 1.3.x, привязка всплывающей подсказки является встроенным методом.

http://leafletjs.com/reference-1.3.0.html#tooltip

var polyline = L.polyline([[StartLat, StartLong],[EndLat,EndLong]]).addTo(this.map);
    polyline.bindTooltip("tool tip is bound");

— Полностью застрял разработчик
источник

1

Фантастика. Полностью избегает джиттера "mouseover" / "mouseout", описанного выше.

— Ник К9

bindTooltip()работает на отдельных маркерах тоже.

— С. Бэгги

4

С точки зрения наличия решения, которое работает «для большего числа маркеров», это то, что я делаю для каждого слоя точечных данных, загружаемых из GeoJSON:

var layerPopup;
featureLayer.on('mouseover', function(e){
    var coordinates = e.layer.feature.geometry.coordinates;
    var swapped_coordinates = [coordinates[1], coordinates[0]];  //Swap Lat and Lng
    if (map) {
       layerPopup = L.popup()
           .setLatLng(swapped_coordinates)
           .setContent('Popup for feature #'+e.layer.feature.properties.id)
            .openOn(map);
    }
});
featureLayer.on('mouseout', function (e) {
    if (layerPopup && map) {
        map.closePopup(layerPopup);
        layerPopup = null;
    }
});

— JayCrossler
источник

Просто любопытно, к какому типу объектов относится FeatureLayer? Похоже, это отличное решение.

— Бер