leafletjs.elevation不会显示gpx

时间:2014-09-25 08:05:55

标签: leaflet gpx elevation

我更新了传单高程示例gpx,只是更改了gox名称,在win 7或OS X和Safari或Chrome上本地工作。什么都没有显示出来。



		var map = new L.Map('map');

		var url = 'http://otile{s}.mqcdn.com/tiles/1.0.0/map/{z}/{x}/{y}.jpeg',
			attr ='Tiles Courtesy of <a href="http://www.mapquest.com/">MapQuest</a> &mdash; Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>',
			service = new L.TileLayer(url, {subdomains:"1234",attribution: attr});

		var el = L.control.elevation();
		el.addTo(map);
		var g=new L.GPX("./maggiore.gpx", {
			async: true,
			 marker_options: {
			    startIconUrl: './lib/leaflet-gpx/pin-icon-start.png',
			    endIconUrl: './lib/leaflet-gpx/pin-icon-end.png',
			    shadowUrl: './lib/leaflet-gpx/pin-shadow.png'
			  }
		});
		g.on('loaded', function(e) {
		  		map.fitBounds(e.target.getBounds());
		});
		g.on("addline",function(e){
			el.addData(e.line);
		});
		g.addTo(map);
		map.addLayer(service);
&#13;
<link href="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css" rel="stylesheet"/>
<head>
	<title>Leaflet.Elevation</title>
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
	 <style>
	   html, body, #map {
	      height:100%;
	      width:100%;
	      padding:0px;
	      margin:0px;
	   } 
	</style>
	<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
	<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css" />
	<!--[if lte IE 8]><link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.ie.css" /><![endif]-->

	<link rel="stylesheet" href="../dist/Leaflet.Elevation-0.0.2.css" />

	<script type="text/javascript" src="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js"></script>
	<script type="text/javascript" src="../dist/Leaflet.Elevation-0.0.2.min.js"></script
	><script type="text/javascript" src="./lib/leaflet-gpx/gpx.js"></script>
</head>
<body>

	<div id="map"></div>
&#13;
&#13;
&#13;

我得到的只是一个带有缩放控制和空图的灰色页面

1 个答案:

答案 0 :(得分:0)

你有leaflet.elevation dist文件吗? 看看你的例子:

<link rel="stylesheet" href="../dist/Leaflet.Elevation-0.0.2.css" />
<script type="text/javascript" src="../dist/Leaflet.Elevation-0.0.2.min.js"></script

您可以将这些文件复制到lib文件夹。