조회 수 78 댓글 6

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 를 임포트시켜야될거같은데 어떻게 해야할지 알려주시면 감사하겠습니다

 

  • profile
    윤삼 2016.09.15 17:55:23

    <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 내엔 안 넣으셔도 돼요

  • ?
    스포 2016.09.15 18:13:25
    html 내에작성해도 같은문제가 일어납니다..
  • ?
    스포 2016.09.15 18:16:17
    <!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 type="text/javascript" src="js.js"> </script>
    </body>
    </html>

    이렇게 입력했습니다
  • ?
    스포 2016.09.15 18:20:32
    본파일에는 추가했는데 댓글작성시 지워지네요
    //<script src="http://openlayers.org/en/v3.18.2/build/ol.js" type="text/javascript"></script>
    이거 head에 추가했습니다
  • ?
    스포 2016.09.15 18:22:07
    http://www.phpschool.com/gnuboard4/bbs/board.php?bo_table=qna_html&wr_id=277133&page=1&sfl=&stx=&sst=&sod=&spt=&page=1&sca=

    xe town에서 글쓸때는 지워지는데 phpschool에 올린코드가 원본입니다,, 어쨋든 추가했는데도 똑같은오류가 발생합니다
  • profile
    윤삼 2016.09.15 18:44:15
    <!doctype html>
    <html lang="en">
        <head>
            <link rel="stylesheet" type="text/css" src="http://openlayers.org/en/v3.18.2/css/ol.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 type="text/javascript" src="js.js"> </script>
        </body>
    </html>

     

    글 작성 때 스크립트가 금지되다보니 소통이 원활하지가 않네요;;;

    위처럼 해보시라구요.

     

    아니면, 제가 한 것처럼 Code Highlighter를 통해서 작성하신 소스를 올려주세요


서버에 요청 중입니다. 잠시만 기다려 주십시오...