routo Developers

폴리곤 위치 정보 조회

다각형을 클릭하여 해당 위치를 받아 오는 예제입니다.

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

var polygon = new routo.maps.Polygon({
  paths: [
    [
    { lng: 127.06512954136697, lat: 37.51132830462774 },
    { lng: 127.06526365181773, lat: 37.5109495879115 },
    { lng: 127.06552650830118, lat: 37.51100490620337 },
    { lng: 127.06537898680537, lat: 37.5113878778689 },
    { lng: 127.06512954136697, lat: 37.51132830462774 },
    ]
  ],
  fillColor: '#0000FF',
  fillOpacity: 0.2,
  strokeColor: '#FFFFFF',
});
polygon.setMap(map);
polygon.addListener('click', (e) => {
  var output = document.querySelectorAll('#output');
  var p = document.createElement('p');
  p.textContent = "선택하신 파란색 폴리곤의 위치 정보는 " + polygon.getPaths() + " 입니다.";
  output[0].append(p.cloneNode(true));
});

var polygon2 = new routo.maps.Polygon({
  paths: [
    [
    { lng: 127.06579204699366, lat: 37.511170860833005 },
    { lng: 127.0658000936207, lat: 37.51113894650982 },
    { lng: 127.06569548746911, lat: 37.511115542664115 },
    { lng: 127.06573572060435, lat: 37.51101128908057 },
    { lng: 127.06589665314524, lat: 37.51104320345836 },
    { lng: 127.06589933535426, lat: 37.511026182458565 },
    { lng: 127.06595029732553, lat: 37.51103894820875 },
    { lng: 127.06594761511653, lat: 37.511075117822486 },
    { lng: 127.0659234752354, lat: 37.51106873495074 },
    { lng: 127.06588592430919, lat: 37.51119000942039 },
    { lng: 127.06579204699366, lat: 37.511170860833005 },
    ]
  ],
  fillColor: '#FF0000',
  fillOpacity: 0.2,
  strokeColor: '#FFFFFF',
});
polygon2.setMap(map);
polygon2.addListener('click', (e) => {
    var output = document.querySelectorAll('#output');
    var p = document.createElement('p');
    p.textContent = "선택하신 빨간색 폴리곤의 위치 정보는 " + polygon2.getPaths() + " 입니다.";
    output[0].append(p.cloneNode(true));
});

var polygon3 = new routo.maps.Polygon({
    paths: [
        [
        { lng: 127.0662855734524, lat: 37.51136872933225 },
        { lng: 127.06633653542369, lat: 37.511053841581244 },
        { lng: 127.06689175268976, lat: 37.51110703217297 },
        { lng: 127.0668461551365, lat: 37.51142617492735 },
        { lng: 127.0662855734524, lat: 37.51136872933225 },
        ]
    ],
    fillColor: '#00FF00',
    fillOpacity: 0.2,
    strokeColor: '#FFFFFF',
});
polygon3.setMap(map);
polygon3.addListener('click', (e) => {
    var output = document.querySelectorAll('#output');
    var p = document.createElement('p');
    p.textContent = "선택하신 초록색 폴리곤의 위치 정보는 " + polygon3.getPaths() + " 입니다.";
    output[0].append(p.cloneNode(true));
});

<!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;
  }

  .output-box {
    width: 97%;
    height: 45%;
    border: 1px solid #000;
    margin: 10px;
    padding: 10px;
    overflow-y: auto;
    font-size: 12px;
    line-height: 18px;
  }
  </style>
</head>
<body>
  <h2>폴리곤 위치 정보 받아오기</h2>
  <hr />
  <p>
    다각형의 위치를 받아 오는 예제입니다.
  </p>
  <div class="map-container">
    <div id="map" class="map"></div>
    <div id="output" class="output-box"></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.5111108884894, lng: 127.06601735255093 }, // 지도 초기 위치
      zoom: 19, // 지도 로딩 시 최초 표시 레벨
    });

    var polygon = new routo.maps.Polygon({
        paths: [
            [
            { lng: 127.06512954136697, lat: 37.51132830462774 },
            { lng: 127.06526365181773, lat: 37.5109495879115 },
            { lng: 127.06552650830118, lat: 37.51100490620337 },
            { lng: 127.06537898680537, lat: 37.5113878778689 },
            { lng: 127.06512954136697, lat: 37.51132830462774 },
            ]
        ],
        fillColor: '#0000FF',
        fillOpacity: 0.2,
        strokeColor: '#FFFFFF',
    });
    polygon.setMap(map);
    polygon.addListener('click', (e) => {
        var output = document.querySelectorAll('#output');
        var p = document.createElement('p');
        p.textContent = "선택하신 파란색 폴리곤의 위치 정보는 " + polygon.getPaths() + " 입니다.";
        output[0].append(p.cloneNode(true));
    });
    
    var polygon2 = new routo.maps.Polygon({
        paths: [
            [
            { lng: 127.06579204699366, lat: 37.511170860833005 },
            { lng: 127.0658000936207, lat: 37.51113894650982 },
            { lng: 127.06569548746911, lat: 37.511115542664115 },
            { lng: 127.06573572060435, lat: 37.51101128908057 },
            { lng: 127.06589665314524, lat: 37.51104320345836 },
            { lng: 127.06589933535426, lat: 37.511026182458565 },
            { lng: 127.06595029732553, lat: 37.51103894820875 },
            { lng: 127.06594761511653, lat: 37.511075117822486 },
            { lng: 127.0659234752354, lat: 37.51106873495074 },
            { lng: 127.06588592430919, lat: 37.51119000942039 },
            { lng: 127.06579204699366, lat: 37.511170860833005 },
            ]
        ],
        fillColor: '#FF0000',
        fillOpacity: 0.2,
        strokeColor: '#FFFFFF',
    });
    polygon2.setMap(map);
    polygon2.addListener('click', (e) => {
        var output = document.querySelectorAll('#output');
        var p = document.createElement('p');
        p.textContent = "선택하신 빨간색 폴리곤의 위치 정보는 " + polygon2.getPaths() + " 입니다.";
        output[0].append(p.cloneNode(true));
    });
    
    var polygon3 = new routo.maps.Polygon({
        paths: [
            [
            { lng: 127.0662855734524, lat: 37.51136872933225 },
            { lng: 127.06633653542369, lat: 37.511053841581244 },
            { lng: 127.06689175268976, lat: 37.51110703217297 },
            { lng: 127.0668461551365, lat: 37.51142617492735 },
            { lng: 127.0662855734524, lat: 37.51136872933225 },
            ]
        ],
        fillColor: '#00FF00',
        fillOpacity: 0.2,
        strokeColor: '#FFFFFF',
    });
    polygon3.setMap(map);
    polygon3.addListener('click', (e) => {
        var output = document.querySelectorAll('#output');
        var p = document.createElement('p');
        p.textContent = "선택하신 초록색 폴리곤의 위치 정보는 " + polygon3.getPaths() + " 입니다.";
        output[0].append(p.cloneNode(true));
    });
  </script>
</body>
</html>

WEB JS