我喜欢在不同的传单地图上绘制几个不同的小段(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>
(我有一个“图层”-array,它为每个段存储一个新图层,因为传单无法处理它,否则)
但传单不喜欢
layer[i].fitBounds
- &GT; TypeError:layers [i]未定义
有人对我有好主意吗?
答案 0 :(得分:0)
尝试在未定义的对象上调用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>