1
我有一个带有标记的Mapbox地图（我也使用MarkerCluster）。我在JavaScript中获取这些HTML标记以确定它们的位置（从视口，而不是它们的坐标），因此我可以添加一些不在视口中的标记指示符。但是我意识到，当我离标记太远时（例如缩放或拖动地图时），标记就不会出现在HTML中！看起来这是正常的行为，因为我可以在正式的例子中看到同样的事情。Mapbox标记在离地图中心太远时消失
所以，这里的问题是：有什么办法来防止这种行为，并始终在HTML中的标记？
这里是JavaScript：（我用mapbox.js和leaflet.markercluster）
var places = {
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"properties": {
"description": ">Test 1"
},
"geometry": {
"type": "Point",
"coordinates": [-1.6313898, 47.2005156]
}
}, {
"type": "Feature",
"properties": {
"description": "Test 2"
},
"geometry": {
"type": "Point",
"coordinates": [2.3279346, 48.8960698]
}
}, {
"type": "Feature",
"properties": {
"description": "Test 3"
},
"geometry": {
"type": "Point",
"coordinates": [2.7391394, 48.7238554]
}
}, {
"type": "Feature",
"properties": {
"description": "Test 4"
},
"geometry": {
"type": "Point",
"coordinates": [55.4933757, -20.9034031]
}
}]
};
L.mapbox.accessToken = 'pk.eyJ1Ijoic3RlcmVvc3VwZXIiLCJhIjoiY2lyM2JnMDIwMDAxM2k0bWNndmUzeTFhbSJ9.UZ-XuPASxGVtYFSqdVyppg';
var map = L.mapbox.map('map', null, {minZoom: 3, maxZoom: 16, center: [46, 8], zoom: 5, scrollWheelZoom: false, maxBounds: [[-100.0,-100.0],[100.0,100.0]]});
L.mapbox.styleLayer('mapbox://styles/stereosuper/cir3bgtaz001wjcnntu6n2axw').addTo(map);
var markers = L.mapbox.featureLayer(places);
var icon = L.divIcon({ iconSize: [30, 30], popupAnchor: [0, -20] });
markers.eachLayer(function(l){ l.setIcon(icon); });
var clusterPlaces = new L.MarkerClusterGroup({
iconCreateFunction: function(cluster){
return new L.DivIcon({ iconSize: [30, 30], html: '<div class="marker-cluster"><span>'+cluster.getChildCount()+'</span></div>' });
}
});
clusterPlaces.addLayer(markers).addTo(map);
map.on('moveend', function(e){
var htmlMarkers = $('.leaflet-marker-icon'),
xCenter = $(window).width()/2, yCenter = $(window).height()/2;
if($('.map-indicator').length){
$('.map-indicator').remove();
}
htmlMarkers.each(function(i){
var thisMarker = $(this),
thisCluster = thisMarker.find('span').length,
thisMarkerHtml = thisCluster ? thisMarker.find('span').html() : 1;
var top = thisMarker.offset().top, left = thisMarker.offset().left;
var indicator = '<button class="map-indicator map-indicator-'+i+'"><span>'+thisMarkerHtml+'</span></button>';
var newLeft, newTop, angle, distance;
var mapHtml = $('#map');
if(top + thisMarker.height() < 0){
mapHtml.append(indicator)
if(left > xCenter){
distance = (left-xCenter) * (yCenter/(yCenter-top));
angle = Math.atan(distance/yCenter)*180/Math.PI;
newLeft = xCenter + distance;
if(newLeft > $(window).width() - 40) newLeft = $(window).width() - 40;
}else{
distance = (xCenter-left) * (yCenter/(yCenter-top));
angle = - Math.atan(distance/yCenter)*180/Math.PI;
newLeft = xCenter - distance;
if(newLeft < 40) newLeft = 40;
}
$('.map-indicator-'+i).css({'top': '10px', 'left': newLeft + 'px', 'bottom': 'auto', 'right': 'auto', '-webkit-transform': 'rotate('+angle+'deg)', 'transform': 'rotate('+angle+'deg)'}).addClass('top').removeClass('bottom', 'left', 'right');
}else if(top > $(window).height()){
mapHtml.append(indicator)
if(left > xCenter){
distance = (left-xCenter) * (yCenter/(yCenter+(top-$(window).height())));
angle = - Math.atan(distance/yCenter)*180/Math.PI;
newLeft = xCenter + distance;
if(newLeft > $(window).width() - 40) newLeft = $(window).width() - 40;
}else{
distance = (xCenter-left) * (yCenter/(yCenter+(top-$(window).height())));
angle = Math.atan(distance/yCenter)*180/Math.PI;
newLeft = xCenter - distance;
if(newLeft < 40) newLeft = 40;
}
$('.map-indicator-'+i).css({'bottom': '10px', 'left': newLeft + 'px', 'top': 'auto', 'right': 'auto', '-webkit-transform': 'rotate('+angle+'deg)', 'transform': 'rotate('+angle+'deg)'}).addClass('bottom').removeClass('top', 'left', 'right');
}else if(left + thisMarker.width() < 0){
mapHtml.append(indicator)
if(top < yCenter){
distance = (yCenter-top) * (xCenter/(xCenter-left));
angle = Math.atan(distance/xCenter)*180/Math.PI;
newTop = yCenter - distance;
if(newTop < 0) newTop = 0;
}else{
distance = (top-yCenter) * (xCenter/(xCenter-left));
angle = - Math.atan(distance/xCenter)*180/Math.PI;
newTop = yCenter + distance;
if(newTop > $(window).height()) newTop = $(window).height() - thisMarker.height();
}
$('.map-indicator-'+i).css({'top': newTop, 'left': '10px', 'bottom': 'auto', 'right': 'auto', '-webkit-transform': 'rotate('+angle+'deg)', 'transform': 'rotate('+angle+'deg)'}).addClass('left').removeClass('bottom', 'top', 'right');
}else if(left > $(window).width()){
mapHtml.append(indicator)
if(top < yCenter){
distance = (yCenter-top) * (xCenter/(xCenter+(left-$(window).width())));
angle = - Math.atan(distance/xCenter)*180/Math.PI;
newTop = yCenter - distance;
if(newTop < 0) newTop = 0;
}else{
distance = (top-yCenter) * (xCenter/(xCenter+(left-$(window).width())));
angle = Math.atan(distance/xCenter)*180/Math.PI;
newTop = yCenter + distance;
if(newTop > $(window).height()) newTop = $(window).height() - thisMarker.height();
}
$('.map-indicator-'+i).css({'top': newTop, 'left': 'auto', 'bottom': 'auto', 'right': '10px', '-webkit-transform': 'rotate('+angle+'deg)', 'transform': 'rotate('+angle+'deg)'}).addClass('right').removeClass('bottom', 'left', 'top');
}
$('.map-indicator-'+i).on('click', function(e){
var coordinates = map.layerPointToLatLng(thisMarker.context._leaflet_pos);
map.panTo(coordinates);
});
});
});
在此先感谢
正是我在找的东西！非常感谢！ – shwarp