OpenLayers3 를이용하여 지도사이트를 만드려고 하는중인데
사이트에서 제공하는 샘플소스
=======샘플소스======
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="http://openlayers.org/en/v3.18.2/css/ol.css" type="text/css">
<style>
.map {
height: 400px;
width: 100%;
}
</style>
<script src="http://openlayers.org/en/v3.18.2/build/ol.js" type="text/javascript"></script>
<title>OpenLayers 3 example</title>
</head>
<body>
<h2>My Map</h2>
<div id="map" class="map"></div>
<script type="text/javascript">
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
view: new ol.View({
center: ol.proj.fromLonLat([37.41, 8.82]),
zoom: 4
})
});
</script>
</body>
</html>
=========
이 소스를 html파일따로 css파일따로 js파일따로 만들어서 html에서 불러오려고 소스를 수정해봤습니다
====index.hmtl===
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="http://openlayers.org/en/v3.18.2/css/ol.css" type="text/css">
<link rel="stylesheet" type="text/css" src="css.css">
<script src="http://openlayers.org/en/v3.18.2/build/ol.js" type="text/javascript"></script>
<title>OpenLayers 3 example</title>
</head>
<body>
<h2>My Map</h2>
<div id="map" class="map"></div>
<script src="http://openlayers.org/en/v3.18.2/build/ol.js" type="text/javascript"></script>
<script type="text/javascript" src="js.js"> </script>
</body>
</html>
========css.css======
<link rel="stylesheet" href="http://openlayers.org/en/v3.18.2/css/ol.css" type="text/css">
.map {
height: 400px;
width: 100%;
}
=====js.js=====
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
view: new ol.View({
center: ol.proj.fromLonLat([37.41, 8.82]),
zoom: 4
})
});
이렇게 원본파일을 수정했는데 js 파일에서 오류가납니다
1'ol' was used before it was defined.var map = new ol.Map({4Expected 'new' at column 13, not column 11.new ol.layer.Tile({5Expected 'source' at column 17, not column 13.source: new ol.source.OSM()6Expected '}' at column 13, not column 11.})9Expected 'center' at column 13, not column 11.center: ol.proj.fromLonLat([37.41, 8.82]),10Expected 'zoom' at column 13, not column 11.zoom: 412Expected '}' at column 5, not column 7.});
아마 js.js파일에서 http://openlayers.org/en/v3.18.2/build/ol.js 를 임포트시켜야될거같은데 어떻게 해야할지 알려주시면 감사하겠습니다
<script src="http://openlayers.org/en/v3.18.2/build/ol.js" type="text/javascript"></script>
말씀하셨던 문제는 얘를 html 내에 넣으시면 될 거예요.
코딩 실수 유의하시구요. http://openlayers.org/en/v3.18.2/css/ol.css" type="text/css">
그리고 얘는 css 내엔 안 넣으셔도 돼요