XETOWN

질문/답변

웹에 관련된 질문과 답변을 나눌 수 있습니다.
조회 수 66 댓글 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를 통해서 작성하신 소스를 올려주세요


List of Articles
번호 제목 글쓴이 날짜
공지 답변을 확실히 받기위한 질문자 지침서 21 람보 2015.12.31
2814 구글 검색엔진에 상위노출 방법 궁금합니다. 낙타 2016.09.16
2813 라이믹스의 JS 통합기능 질문드립니다 4 고라자 2016.09.16
2812 클라우드 호스팅 이용시 머 이용할수잇나요>? 3 언션 2016.09.16
2811 로그인이 안되는 현상 + 캐시 재생성이 안되는 현상 질문드립니다 11 기븐 2016.09.16
2810 다음 팁이 라이믹스에는 적용되어 있나요? 7 고라자 2016.09.16
2809 클플 차단 질문 6 데버 2016.09.15
2808 댓글 ACT 값이 뭔가요? 3 NEX 2016.09.15
2807 웹에서 만약 28포인트라면 모바일에서는 더 축소해서 보여야하는데. 1 질문쟁이 2016.09.15
2806 https -> http 리다이렉트 질문드립니다. 2 빵떡 2016.09.15
» XE질문 이라기보다 js질문입니다 6 스포 2016.09.15
2804 최근이미지... 위젯에서 막히내 ㅡㅡ 4 언션 2016.09.15
2803 [도와주세요]인증세션사용시 쿼리포함된 외부페이지 오류메시지 초xe보 2016.09.14
2802 (HELP) 스케치북 게시판 textarea 댓글 작성시 "내용 값은 필수입니다" 알림창이 뜨면서 안되는 문제 6 기븐 2016.09.14
2801 요즘 클라우드플레어 속도가 빠르나요? 전 돌겠네요. 느려서... 15 중년 2016.09.14
2800 기존 php-fpm php 5.4.22 에서 php-fpm as php7으로 가려고 합니다. 1 홍수영 2016.09.14
2799 db 관련 djdisodo 2016.09.14
2798 ajax를 통한 문서 목록 필터링이 생각처럼 되질 않네요 8 윤삼 2016.09.14
2797 라이믹스 설치 이후에 갑자기 엄청난 용량의 error_log 파일이 생성되었는데.. 21 기븐 2016.09.13
2796 잘못되거나 없는 페이지 접속시 낙타 2016.09.13
2795 라이믹스 SEO 설정에서 개별 문서 페이지 제목에는 $SUBPAGE_TITLE 사용이 안되나요? 5 file 기븐 2016.09.13
Board Pagination Prev 1 ... 60 61 62 63 64 65 66 67 68 69 ... 205 Next
/ 205
위로
서버에 요청 중입니다. 잠시만 기다려 주십시오...