请确保您的标记的经度范围在0..360
之间,而不是-180..180
。
即,不要使用
L.marker([0,170]).addTo(map);
L.marker([0,-180]).addTo(map);
L.marker([0,-170]).addTo(map);
做类似于以下操作:
L.marker([0,170]).addTo(map);
L.marker([0,180]).addTo(map);
L.marker([0,190]).addTo(map);
L.Util.wrapNum(lng, [0,360], true)
。在Leaflet Github上报告了类似的问题。
解决方法是如果标记点的初始经度小于0,则增加它们的经度。
var totalMarkers = markerPositions.length;
for(var i = 0; i<totalMarkers; i++){
var mData = markerPositions[i];
if (mData.lon < 0) {
mData.lon += 360;
}
L.marker([mData.lat, mData.lon]).addTo(map);
}
将其应用于跨越反子午线附近的标记也同样有效,例如:
var myRepeatingMarkers = L.gridLayer.repeatedMarkers().addTo(map);
L.polyline([[-85,180],[85,180]]).addTo(map);
L.polyline([[-85,-180],[85,-180]]).addTo(map);
myRepeatingMarkers.addMarker(L.marker([0,140]));
myRepeatingMarkers.addMarker(L.marker([0,150]));
myRepeatingMarkers.addMarker(L.marker([0,160]));
myRepeatingMarkers.addMarker(L.marker([0,170]));
myRepeatingMarkers.addMarker(L.marker([0,180]));
myRepeatingMarkers.addMarker(L.marker([0,-170]));
myRepeatingMarkers.addMarker(L.marker([0,-160]));
myRepeatingMarkers.addMarker(L.marker([0,-150]));
myRepeatingMarkers.addMarker(L.marker([0,-140]));
将会显示类似于:
注:Leaflet是一款开放源代码的JavaScript库,用于创建交互式地图。感谢大家的帮助。实际上,我没有使用你们建议的代码,但是我得到了修复它的想法。
这是我的解决方案,希望对其他寻找相同解决方案的人有所帮助: 已解决的屏幕截图
始终在地图上显示图标及其副本(在您想要的经度范围内,在我的情况下,从0到360)
makeMarkers: (item) ->
markers = []
markers.push(item.makeMarker())
copy_marker = item.makeMarker()
copy_marker.setLatLng( new L.LatLng(copy_marker._latlng.lat, copy_marker._latlng.lng + 360) )
markers.push(copy_marker)
markers
makeMarker: ->
LeafletIcon = L.Icon.extend(
options: {
iconSize: [25, 25],
iconAnchor: [10, 10],
popupAnchor: [0, 0]
},
)
icon = new LeafletIcon( {iconUrl: this.iconUrl} )
marker = L.marker([this.latitude, this.longitude], {icon: icon, zIndexOffset: 10})
marker.id = this.id
marker
再次感谢。