如何“解除绑定”Mapbox中的弹出窗口?只允许从一定范围内的标记弹出(当用户移动时改变)

How to "unbind" Popups in Mapbox? Allowing only popups from markers within certain range(changing when user moves)

本文关键字：范围内 改变 移动 用户 绑定 解除绑定 Mapbox 如何 窗口      更新时间：2023-09-26

我正试图在我的地图上看到工具提示或弹出标记的能力之间切换，这取决于与它们的距离。有一个简单的方法来启用弹出窗口，但是有没有类似的方法

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语句，允许弹出范围内的标记，当用户移动

用您的L.Map实例的locate方法来定位带有传单的客户端。启动后，您可以侦听locationfound事件。该事件包含一个L.LatLng实例，其中包含客户机坐标。L.Marker实例有一个getLatLng方法，它返回一个带有标记坐标的L.LatLng实例。您可以使用L.Latlng实例的distanceTo方法来计算它们之间的距离。在带有注释的代码中进一步解释:

// 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位置事件

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

p。我目前无法测试地理定位，所以我徒手制作了这个。应该没问题，希望;)

相关文章：