如何在地图循环中复制标记位置，使用Leaflet JS

Question

如何在地图循环中复制标记位置，使用Leaflet JS

9

我正在使用Leaflet JS构建一个自定义地图（具有自定义瓷砖），它从东到西循环。我添加了几层标记和多边形（用于指示地图上的路线），每个标记都有弹出日期。我想在克隆地图上的左右两侧复制标记/多边形图层，使其位置看起来相同。

  var mapMinZoom = 2;
  var mapMaxZoom = 6;

  var tiles = L.tileLayer('../bigger_map/{z}/{x}/{y}.png', {
    unloadInvisibleTiles : false,
    reuseTiles : true,
    updateWhenIdle : false,
    continousWorld : true,
    noWrap: false          
  });

  var marker = L.marker([-110.25, 120.6875]).bindPopup("<iframe src='http://player.vimeo.com/video/114950712'>Vimeo</iframe>"),
      markerSecond = L.marker([ -85.71875, 111.8125]).bindPopup("<a href='#vid' class='fancybox-media'>  click me </a>"),
      markerThird = L.marker([ -71, 100]).bindPopup("<a href='#vid' class='fancybox-media'>  click me </a>"),
      markerFourth = L.marker([ -62.75, 82.75]).bindPopup("<iframe src='http://player.vimeo.com/video/114950712'>Vimeo</iframe>"),
      markerFifth = L.marker([ -52.5, 48]).bindPopup("<a href='#vid' class='fancybox-media'>  click me </a>"),
      markerSixth = L.marker([ -75.75, 57]).bindPopup("<a href='#vid' class='fancybox-media'>  click me </a>");

  var polygon = L.polygon([ [-110.25, 120.6875], [ -85.71875, 111.8125] ]),
      polygonSecond = L.polyline([ [-85.71875, 111.8125], [ -71, 100] ]), 
      polygonThird = L.polyline([[ -71, 100], [ -62.75, 82.75] ]),
      polygonFourth = L.polyline([[ -62.75, 82.75], [ -52.5, 48] ]),
      polygonFifth = L.polyline([ [ -52.5, 48],  [-75.75, 57] ]);   

  var americaTour = L.layerGroup([marker, markerSecond, markerThird, markerFourth, markerFifth, markerSixth]); 
  var americaPolys = L.layerGroup([ polygon, polygonSecond, polygonThird, polygonThird, polygonFourth, polygonFifth]);   

  var map = L.map('map', {
    maxZoom: mapMaxZoom,
    minZoom: mapMinZoom,
    layers: [tiles, americaTour, americaPolys],
    //inertia options
    //where the map builds momentum while dragging and continues moving in the same direction for some time.
    inertiaDecelartion : 3000,
    inertiaMaxSpeed    : 1500,
    inertiaThershold   : 32,
    crs: L.CRS.Simple
  });

  var mapBounds = new L.LatLngBounds(
      map.unproject([0, 14295], mapMaxZoom),
      map.unproject([15816, 0], mapMaxZoom));

  map.fitBounds(mapBounds);

 map.panTo(new L.LatLng(-110.25, 120.6875));
}

非常感谢您的帮助。我已经试图通过不同的方式在Google上搜索，但所有Leaflet示例都没有这个功能。

- George D

我不太理解你所说的“克隆地图循环”。我没有看到任何代码在循环任何东西。你想要在时间间隔内循环地图，平移到一个标记，显示弹出窗口，然后平移到下一个标记，显示那个弹出窗口等吗？ - iH8

抱歉如果不太清楚。nowrap: false的意思是，自定义地图瓦片一旦用户到达左侧或右侧边缘，地图会重复显示，就像在Google Earth上不断向左或向右滚动一样。然而，标记不会在其他地图上重复显示（即，标记仅在您首次加载页面时查看的中心地图上）。尽管很有趣，我也想在以后实现您提出的功能。 - George D

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- iH8 · Accepted Answer

在地图选项中使用 'worldCopyJump': true。启用此选项后，地图会跟踪您何时移动到世界的另一个“副本”，并平滑跳转到原始副本，以便所有覆盖层（如标记和矢量图层）仍然可见。

在 Plunker 上的工作示例：http://plnkr.co/edit/mWKc4M?p=preview。

参考链接：http://leafletjs.com/reference.html#map-worldcopyjump。