Javascript 如何";“解除绑定”;地图盒中的弹出窗口?仅允许特定范围内标记的弹出窗口(用户移动时更改)
我正在尝试在地图上查看标记的工具提示或弹出窗口的功能之间切换,这取决于与标记的距离。有一个简单的方法来启用弹出窗口,但是有没有类似的方法Javascript 如何";“解除绑定”;地图盒中的弹出窗口?仅允许特定范围内标记的弹出窗口(用户移动时更改),javascript,leaflet,mapbox,Javascript,Leaflet,Mapbox,我正在尝试在地图上查看标记的工具提示或弹出窗口的功能之间切换,这取决于与标记的距离。有一个简单的方法来启用弹出窗口,但是有没有类似的方法 marker.bindPopup(entries[i].text_content); 要删除再次查看弹出窗口的功能 以下是代码的完整部分,以供参考 $http.get(ApiEndpoint.entry).then(function(data) { entries = data.data; for (i=0; i<entries.len
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);
});
$http.get(apidendpoint.entry)。然后(函数(数据){
条目=data.data;
对于(i=0;i使用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.LayerGroup([
新的L.标记([0,0]),
新的L.标记([0,0])
]).addTo(地图);
//开始地理定位(假设map拥有一个L.map实例)
map.locate();
//倾听事件
map.on('locationfound',函数(事件){
//如果成功,则获取客户端坐标
var clientLatLng=event.latLng;
//循环标记
group.eachLayer(功能(标记器){
//获取标记坐标
var markerlatng=marker.getLatLng();
//计算距离
var distance=clientLatLng.distanceTo(markerLatLng);
//在40米以内
如果(距离<40){
marker.bindpoop('POP');
marker.openPopup();
}否则{
marker.unbindpoop();
}
});
});
参考资料:
L.Map.locate():
L.LatLng.distance to():
另外,我现在无法测试地理位置,所以我徒手拿了这个。应该没问题,希望;)这就是我要找的标记我发现最好在后端进行距离计算,并使用缓存来存储要更改弹出窗口的信息。在某种程度上,您的回答提供了所需的信息,但也让我了解了.distanceTo函数,该函数可能会取代haversine函数。因此,我将其标记为正确:)谢谢