2017-02-08 15 views
0

저는 전단지에 새로운 것이므로 기초를 파악하려고합니다. 전단지에서 온라인으로 제공되는 튜토리얼을 따라 가면지도를로드하는 데 어려움을 겪고 있습니다. 제공된 좌표를 사용하면 문제가 없지만 좌표를 변경하면 아무 것도로드되지 않습니다.리플릿지도가로드되지 않습니다.

아무도 도와 줄 수 있습니까? 여기에 내가 무슨 없습니다 :

<!DOCTYPE html> 
    <html> 
    <head> 
    <title>Leaflet Web Map</title> 
    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" /> 
    <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script> 
<style> 
    #map { 
    width: 960px; 
    height:500px; 
    } 
</style> 
</head> 


<body> 
<div id="map"></div> 

<script> 
    var map = L.map('map',{ 
    center: [43.64701, -79.39425], 
    zoom: 15 
    }); 
    L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', { 
    attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' 
    }).addTo(map); 
</script> 

이 부하가 더 귀찮게하지만 난 전혀 좌표를 변경하는 경우는로드되지 않습니다.

답변

0

지도 중심을 변경하려면지도 속성에서 변경해야합니다 : center: [43.00, -79.00]. 두 번째는, 경도이 범위 (-180, 180)에 설정해야하는 동안

var map = L.map('map',{ 
    center: [43.00, -79.00], 
    zoom: 15 
}); 

먼저 좌표를 기억한다 위도는 범위 (-90, 90)의 번호를 얻어. 그러나 어쨌든 두 번째 좌표 응용 프로그램을 초과하면 지정된 범위에있는 것처럼 값을 계산합니다.

아마도 뭔가를 섞어 여기에서 변경하려고 시도 했습니까 L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png',..? 이 선은지도를 중앙에 배치하지 않고 기본지도 타일을로드하는 것을 의미합니다.

0

문제점을 재현하지 못했습니다. 센터를 변경하면 여전히지도가로드됩니다. 난 당신이 끝 본체 최종 HTML 태그를 가지고 있지 않은 것으로 나타났습니다, 그래서 사람들을 추가

var map = L.map('map', { 
 
    //center: [43.64701, -79.39425], //comment out one of the centers 
 
    center: [40, -80], 
 
    zoom: 15 
 
    }); 
 
    L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', { 
 
    attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' 
 
    }).addTo(map);
<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <title>Leaflet Web Map</title> 
 
    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" /> 
 
    <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script> 
 
    <style> 
 
    #map { 
 
     width: 960px; 
 
     height: 500px; 
 
    } 
 
    </style> 
 
</head> 
 

 

 
<body> 
 
    <div id="map"></div> 
 
</body> 
 

 
</html>

(이하, [실행 코드 조각] 버튼을 클릭합니다).

변경하려는 좌표는 무엇입니까?

0

시도

var tileLayer = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', 
    { 
     attribution: false 
    }); 

var map = L.map('map', 
    { 
     zoomControl: true, 
     layers: [tileLayer], 
     maxZoom: 18, 
     minZoom: 6 
    }) 
    .setView([43.64701, -79.39425], 15); 

    setTimeout(function() { map.invalidateSize() }, 800);