routo Developers

폴리곤 생성/삭제

지도위에 폴리곤 도형을 생성 삭제 할 수 있습니다.

var map = new routo.maps.Map("map", {
  center: { lat: 37.507009, lng: 127.0586339 }, // 지도 초기 위치
  zoom: 18, // 지도 로딩 시 최초 표시 레벨
});

var polygon = null;
var createPolygon = document.querySelector('#create-polygon');
createPolygon.addEventListener('click', function() {
    polygon = new routo.maps.Polygon({
        paths: [
            [
                { lng: 127.09587565188198, lat: 37.5118010266456 },
                { lng: 127.09607949976713, lat: 37.511273379204695 },
                { lng: 127.0959292960623, lat: 37.51123082682916 },
                { lng: 127.09619751696378, lat: 37.51049041161171 },
                { lng: 127.09639063601284, lat: 37.51052445385177 },
                { lng: 127.09644428019315, lat: 37.51041381651487 },
                { lng: 127.09653011088163, lat: 37.51031168959676 },
                { lng: 127.09663739924223, lat: 37.51026913667299 },
                { lng: 127.09675541643888, lat: 37.51020105194448 },
                { lng: 127.09689489130766, lat: 37.510192541349056 },
                { lng: 127.09761372332365, lat: 37.51036275307328 },
                { lng: 127.09766736750396, lat: 37.51027764725967 },
                { lng: 127.09806433443815, lat: 37.510371263649276 },
                { lng: 127.09811797861845, lat: 37.51026062608531 },
                { lng: 127.0985256743887, lat: 37.51035424249628 },
                { lng: 127.09856858973295, lat: 37.5102521154967 },
                { lng: 127.09936252360136, lat: 37.51044785878983 },
                { lng: 127.0993517947653, lat: 37.51054998552159 },
                { lng: 127.09937325243743, lat: 37.51068615427995 },
                { lng: 127.09939471010954, lat: 37.510796791213195 },
                { lng: 127.09943762545377, lat: 37.51085636487855 },
                { lng: 127.09951272730619, lat: 37.51095849105138 },
                { lng: 127.09954491381437, lat: 37.51101806458769 },
                { lng: 127.09965220217497, lat: 37.511060617084496 },
                { lng: 127.09981313471586, lat: 37.51114572200537 },
                { lng: 127.09995260958463, lat: 37.51114572200537 },
                { lng: 127.1001242709616, lat: 37.51109465906451 },
                { lng: 127.1002744746664, lat: 37.51104359608871 },
                { lng: 127.10043540720731, lat: 37.51097551206662 },
                { lng: 127.10056415324003, lat: 37.511179763946515 },
                { lng: 127.10034957651885, lat: 37.51173294331443 },
                { lng: 127.10008135561735, lat: 37.51185208910324 },
                { lng: 127.09990969424038, lat: 37.51221803569385 },
                { lng: 127.09977021937162, lat: 37.512362711758 },
                { lng: 127.09958782915861, lat: 37.51247334620612 },
                { lng: 127.09942689661773, lat: 37.512524408203745 },
                { lng: 127.09923377756863, lat: 37.51256695984176 },
                { lng: 127.09909430269987, lat: 37.51257547016644 },
                { lng: 127.0989762855032, lat: 37.51257547016644 },
                { lng: 127.09587565188198, lat: 37.5118010266456 }
            ]
        ],
        fillColor: '#F1CDB0',
        fillOpacity: 0.5,
        strokeColor: '#E7CFC8',
        strokeOpacity: 0.5
      });
    polygon.setMap(map);
    
    map.fitBounds(polygon.getBounds(), {
        top: 170,
        right: 50,
        bottom: 30,
        left: 150,
    });
});

var deletePolygon = document.querySelector('#delete-polygon');
deletePolygon.addEventListener('click', function() {
  polygon.setMap(null);
  polygon = null;  
});

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>폴리곤 생성 삭제하기</title>
    
  <style>
  html,
  body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
  }

  .map {
    width: 100%;
    height: 400px;
    position: relative;
  }
  </style>
</head>
<body>
  <h2>폴리곤 생성 삭제하기</h2>
  <hr />
  <p>
    지도위에 폴리곤 도형을 생성 삭제 할 수 있습니다.
  </p>
  <div class="map-container">
    <div class="map-tool-bar">
      <button id="create-polygon" class="cs-btn3">폴리곤 생성하기</button>
      <button id="delete-polygon" class="cs-btn3">폴리곤 삭제하기</button>
    </div>
    <div id="map" class="map"></div>
  </div>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="https://api.routo.com/v2/maps/map?key={APIKEY}"></script>
  <script>
    var map = new routo.maps.Map("map", {
      center: { lat: 37.507009, lng: 127.0586339 }, // 지도 초기 위치
      zoom: 18, // 지도 로딩 시 최초 표시 레벨
    });

    var polygon = null;
    var createPolygon = document.querySelector('#create-polygon');
    createPolygon.addEventListener('click', function() {
        polygon = new routo.maps.Polygon({
            paths: [
                [
                    { lng: 127.09587565188198, lat: 37.5118010266456 },
                    { lng: 127.09607949976713, lat: 37.511273379204695 },
                    { lng: 127.0959292960623, lat: 37.51123082682916 },
                    { lng: 127.09619751696378, lat: 37.51049041161171 },
                    { lng: 127.09639063601284, lat: 37.51052445385177 },
                    { lng: 127.09644428019315, lat: 37.51041381651487 },
                    { lng: 127.09653011088163, lat: 37.51031168959676 },
                    { lng: 127.09663739924223, lat: 37.51026913667299 },
                    { lng: 127.09675541643888, lat: 37.51020105194448 },
                    { lng: 127.09689489130766, lat: 37.510192541349056 },
                    { lng: 127.09761372332365, lat: 37.51036275307328 },
                    { lng: 127.09766736750396, lat: 37.51027764725967 },
                    { lng: 127.09806433443815, lat: 37.510371263649276 },
                    { lng: 127.09811797861845, lat: 37.51026062608531 },
                    { lng: 127.0985256743887, lat: 37.51035424249628 },
                    { lng: 127.09856858973295, lat: 37.5102521154967 },
                    { lng: 127.09936252360136, lat: 37.51044785878983 },
                    { lng: 127.0993517947653, lat: 37.51054998552159 },
                    { lng: 127.09937325243743, lat: 37.51068615427995 },
                    { lng: 127.09939471010954, lat: 37.510796791213195 },
                    { lng: 127.09943762545377, lat: 37.51085636487855 },
                    { lng: 127.09951272730619, lat: 37.51095849105138 },
                    { lng: 127.09954491381437, lat: 37.51101806458769 },
                    { lng: 127.09965220217497, lat: 37.511060617084496 },
                    { lng: 127.09981313471586, lat: 37.51114572200537 },
                    { lng: 127.09995260958463, lat: 37.51114572200537 },
                    { lng: 127.1001242709616, lat: 37.51109465906451 },
                    { lng: 127.1002744746664, lat: 37.51104359608871 },
                    { lng: 127.10043540720731, lat: 37.51097551206662 },
                    { lng: 127.10056415324003, lat: 37.511179763946515 },
                    { lng: 127.10034957651885, lat: 37.51173294331443 },
                    { lng: 127.10008135561735, lat: 37.51185208910324 },
                    { lng: 127.09990969424038, lat: 37.51221803569385 },
                    { lng: 127.09977021937162, lat: 37.512362711758 },
                    { lng: 127.09958782915861, lat: 37.51247334620612 },
                    { lng: 127.09942689661773, lat: 37.512524408203745 },
                    { lng: 127.09923377756863, lat: 37.51256695984176 },
                    { lng: 127.09909430269987, lat: 37.51257547016644 },
                    { lng: 127.0989762855032, lat: 37.51257547016644 },
                    { lng: 127.09587565188198, lat: 37.5118010266456 }
                ]
            ],
            fillColor: '#F1CDB0',
            fillOpacity: 0.5,
            strokeColor: '#E7CFC8',
            strokeOpacity: 0.5
        });
        polygon.setMap(map);
        
        map.fitBounds(polygon.getBounds(), {
            top: 170,
            right: 50,
            bottom: 30,
            left: 150,
        });
    });

    var deletePolygon = document.querySelector('#delete-polygon');
    deletePolygon.addEventListener('click', function() {
        polygon.setMap(null);
        polygon = null;  
    });
  </script>
</body>
</html>

WEB JS