Leaflet 同一页上有几个不同的传单地图
我喜欢画几个不同的小片段(gpx文件),每个片段都在一张单独的传单地图上 有了这段代码,我试着围绕这个问题来写,那个传单需要一个新的图层来绘制地图 我使用“层”-数组来存储所有地图参考Leaflet 同一页上有几个不同的传单地图,leaflet,mapbox,gpx,Leaflet,Mapbox,Gpx,我喜欢画几个不同的小片段(gpx文件),每个片段都在一张单独的传单地图上 有了这段代码,我试着围绕这个问题来写,那个传单需要一个新的图层来绘制地图 我使用“层”-数组来存储所有地图参考 <script> var layers = []; var i = 0; var ref; </script> @for(segment <- segments) { <div id="@segment.id" style="height:300
<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>
->TypeError:层[i]未定义
有人对我有什么好主意吗?您试图对未定义的对象调用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>
var层=[];
var i=0;
var map=“map”;
对于(var i=0;我可以将其放入console.log(层)中)
在行抛出错误之前,我们可以看到这里发生了什么?或者更好的是,您可以将其放在在线演示中吗?是否创建了地图容器?是否正确插入了@segment.id?我创建了一个小示例,但没有找到链接gpx文件的方法。如果您将行“var ref=layers[I];”替换为“layers[I]”问题出现了,目前只有最后一张地图显示了轨迹。我测试了@segment.id,它肯定正常工作。作为旁注,您不应该在同一页上包含传单0.5和地图框2.1.9。请删除http://cdn.leafletjs.com/leaflet-0.5/leaflet.js
参考。
<!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>