2015-09-17 4 views
0

Я пытаюсь переключить между возможностью видеть всплывающие подсказки или всплывающие окна для маркеров на моей карте, в зависимости от расстояния от них. Существует простой способ, чтобы включить всплывающие окна, но есть ли способ похож наКак «развязать» всплывающие окна в Mapbox? Разрешить только всплывающие окна с маркерами в определенном диапазоне (изменение при перемещении пользователя)

marker.bindPopup(entries[i].text_content); 

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

Для справки, здесь полная часть кода

$http.get(ApiEndpoint.entry).then(function(data) { 
    entries = data.data; 
    for (i=0; i<entries.length; i++){ 
      var lat = entries[i].lat; 
      var long = entries[i].long; 
    } 
    var markers = new L.MarkerClusterGroup({maxClusterRadius: 40, removeOutsideVisibleBounds: true, singleMarkerMode: true}); 

    for (var i = 0; i < entries.length; i++) { 
     var a = entries[i]; 
     var title = a[2]; 
     marker = L.marker(new L.LatLng(a.lat, a.long), { 
      icon: L.mapbox.marker.icon({'marker-symbol': 'post', 'marker-color': '0044FF'}), 
     }); 
     if(haversineDistance(current_lat, current_long, entries[i].lat, entries[i].long)<26){ 
      marker.bindPopup(entries[i].text_content); 
     }; 

     markers.addLayer(marker); 
    } 
    map.addLayer(markers); 
}); 

Если функция haversineDistance используется для вычисления расстояния от текущего местоположения маркеров.

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

ответ

0

Geolocating client with Leaflet можно сделать с помощью метода locate вашего L.Map экземпляра. После запуска вы можете прослушать событие locationfound. Событие содержит экземпляр L.LatLng, который содержит координаты клиента. L.Marker экземпляры имеют метод getLatLng, который возвращает экземпляр L.LatLng с координатами маркера. Вы можете рассчитать расстояние между ними, используя метод distanceTo из L.Latlng экземпляров. В коде с комментариями объяснить далее:

// Markers in a LayerGroup 
var group = new L.LayerGroup([ 
    new L.Marker([0,0]), 
    new L.Marker([0,0]) 
]).addTo(map); 

// Start geolocation (assuming map holds a L.Map instance) 
map.locate(); 

// Listen for the event 
map.on('locationfound', function(event){ 
    // If succeeded get client coordinates 
    var clientLatLng = event.latLng; 
    // Loop over markers 
    group.eachLayer(function(marker){ 
    // Get marker coordinates 
    var markerLatLng = marker.getLatLng(); 
    // Calculate distance 
    var distance = clientLatLng.distanceTo(markerLatLng); 

    // When within 40 meters 
    if (distance < 40) { 
     marker.bindPopup('POP'); 
     marker.openPopup(); 
    } else { 
     marker.unbindPopup(); 
    } 
    }); 
}); 

Ссылки:

L.Map.locate(): http://leafletjs.com/reference.html#location-event

L.LatLng.distanceTo(): http://leafletjs.com/reference.html#latlng-distanceto

PS. Я не могу проверить Geolocation в данный момент, поэтому я освободил это. Должно быть хорошо, надеюсь;)

+0

Это был marker.unbindPopup, который я искал. :) Я выяснил, что лучше сделать расчет расстояний на внутреннем сервере и использовать кеш для хранения информации о том, какие из них нужно изменить всплывающее окно. Частично ваш ответ предоставил необходимую информацию, но также дал мне представление о функции .distanceTo, которая, возможно, заменит функцию haversine. Поэтому я буду отмечать это как правильно. :) Благодаря. –

Смежные вопросы