同一页上的几个不同的传单地图答案

【问题标题】：Several different leaflet maps on same page同一页上的几个不同的传单地图
【发布时间】：2015-07-18 02:19:45
【问题描述】：

我喜欢绘制几个不同的小片段（gpx 文件），每个片段都在单独的传单地图上

我试图用这段代码来解决这个问题，传单需要一个新的地图层

我使用“layers”-array 来存储所有地图引用...

<script>
    var layers = [];
    var i = 0;
    var ref;
</script>
@for(segment <- segments) {
    <div id="@segment.id" style="height:300px"></div>
    <script>
        layers[i] = L.map("@segment.id");

        L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        }).addTo(layers[i]);

        var url = '/assets/gpx_files/@segment.gpxPath';

        new L.GPX(url, {
            async: true,
            marker_options: {
                startIconUrl: '/assets/images/pinIcon.png',
                endIconUrl: '/assets/images/pinIcon.png',
                shadowUrl: '/assets/images/pinIconShadow.png'
            }
        }).on('loaded', function(e) {
            layers[i].fitBounds(e.target.getBounds());
        }).addTo(layers[i]);
        i = i+1;
    </script>

（我有一个“层”数组，它为每个段存储一个新层，因为传单无法处理它）

但传单不喜欢

layer[i].fitBounds

-> TypeError: layers[i] is undefined

有谁给我一个好主意吗？

【问题讨论】：

你能在抛出错误的行之前放入console.log(layers)，这样我们就可以看到这里发生了什么？或者更好的是，你能把它放在在线演示中吗？是否正在创建地图容器？@segment.id 是否被正确插值？
我建立了一个小例子，但我没有找到链接 gpx 文件的方法。 jsbin.com/xovuseqata/2/edit?html,css,output 如果你替换行“var ref = layers[i];”使用“layers[i]”会出现问题，目前只有最后一张地图显示了轨迹。我测试了@segment.id，它肯定工作正常。
作为旁注，您不应该在同一页面上包含 Leaflet 0.5 和 Mapbox 2.1.9。删除 http://cdn.leafletjs.com/leaflet-0.5/leaflet.js 引用。

标签： leaflet mapbox gpx

【解决方案1】：

尝试在未定义的对象上调用 fitBounds 时出错。这个代码块在这里解决了这个问题。请注意我是如何在其选项哈希中将地图引用（ref:ref）传递给 GPX 的，这样我以后可以清楚地检索它，而不是尝试通过索引来获取它。GPX 检索操作是异步的，并且无法保证它何时会完成，所以你需要意识到这一点。此代码将延迟排除在外。

<!DOCTYPE html>
<html>
<head>
  <meta charset=utf-8 />
  <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
  <script src='https://api.tiles.mapbox.com/mapbox.js/v2.1.9/mapbox.js'></script>
  <link href='https://api.tiles.mapbox.com/mapbox.js/v2.1.9/mapbox.css' rel='stylesheet' />
</head>
<body>
<script src="https://rawgithub.com/mpetazzoni/leaflet-gpx/master/gpx.js"></script>

<div id="map0" style="height:300px"></div>
<div id="map1" style="height:300px"></div>
<div id="map2" style="height:300px"></div>
<div id="map3" style="height:300px"></div>
<script>
var layers = [];
var i = 0;
var map = "map";
for(var i=0;i<4;i++){
  layers[i] = L.map(map.concat(i));
  var ref = layers[i];
  L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  }).addTo(ref);

  var url = 'https://www.mapbox.com/mapbox.js/assets/data/run.gpx';

  new L.GPX(url, {
    ref:ref,
    async: true
  }).on('loaded', function(e) {
 e.target.options.ref.fitBounds(e.target.getBounds());
  }).addTo(ref);
}
</script>

查看输出@http://output.jsbin.com/yazafuvika/1/

【讨论】：