routo Developers

위치 지정 마커 표시

현재 지도의 중심에 위치를 지정하는 마커를 표시할 수 있습니다.

현재 위치: [,]

// map 초기 위치
const center = {
  lat: 37.507009,
  lng: 127.0586339
};

// map 생성
const map = new routo.maps.Map('map', {
  center,
  zoom: 15,
  maxZoom: 19,
  minZoom: 7,
  locationControl: true,
  locationControlOptions: { // Options 값 없으면 아래 값을 Default로 설정한다.
    markerImageUrl: 'https://tile.routo.com/webgis_tile01/Static/images/marker/1.png',
    position: routo.maps.ImagePosition.BOTTOM_CENTER
  },
  blockRotation: true,
  keyboardEventTarget: document,
  constrainResolution: true,
  restriction: { latLngBounds: { west: 124.6, south: 33.114, east: 131.875, north: 42.59 }, strictBounds: true }, // 지도가 표시할 영역을 지정(해당 영역 밖으로 이동 불가)
});

// 현재 위치 표시
document.getElementById("lat").innerText = center.lat;
document.getElementById("lng").innerText = center.lng;

// 지도 이동 완료(MOVE_END)시 현재 지도 중심 좌표 표시

// 지도 드래그 시작
map.addListener("dragstart", () => {
  document.getElementById("lat").innerText = map.getCenter().lat();
  document.getElementById("lng").innerText = map.getCenter().lng();
});

// 지도 드래그 중
map.addListener("drag", () => {
  document.getElementById("lat").innerText = map.getCenter().lat();
  document.getElementById("lng").innerText = map.getCenter().lng();
});

// 지도 드래그 종료
map.addListener("dragend", () => {
  document.getElementById("lat").innerText = map.getCenter().lat();
  document.getElementById("lng").innerText = map.getCenter().lng();
});

// Location Control 시작
function start() {
  map.setActiveLocationMarker(true);
}

// Location Control 종료
function end() {
  map.setActiveLocationMarker(false);
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>지도 위치 지정 마커 표시</title>
  
  <style>
  html,
  body {
      margin: 0;
      padding: 0px 15px 10px 15px;
      width: 100%;
      height: 100%;
  }

  .map {
      width: 100%;
      height: 400px;
      position: relative;
  }

  .tool-bar {
      position: absolute;
      left: 10px;
      top: 10px;
      z-index: 10;
  }
  </style>
</head>

<body>
  <h2>지도 위치 지정 마커 표시</h2>
  <hr />
  <p>
    현재 지도의 중심에 위치를 지정하는 마커를 표시할 수 있습니다.
  </p>
  <div id="map" class="map"></div>
  <div id="location">
    현재 위치: [<span id="lat"></span><span>,</span><span id="lng"></span>] 
  </div>
  <div class="tool-bar">
    <button id="start-location-control" class="button" onclick="start()">현재 위치 지정</button>
    <button id="end-location-control" class="button" onclick="end()">현재 위치 지정 종료</button>
  </div>
  <script src="https://api.routo.com/v2/maps/map?key={APIKEY}"></script>
  <script>
      // map 초기 위치
      const center = {
        lat: 37.507009,
        lng: 127.0586339
      };
      
      // map 생성
      const map = new routo.maps.Map('map', {
        center,
        zoom: 15,
        maxZoom: 19,
        minZoom: 7,
        locationControl: true,
        locationControlOptions: { // Options 값 없으면 아래 값을 Default로 설정한다.
          markerImageUrl: 'https://tile.routo.com/webgis_tile01/Static/images/marker/1.png',
          position: routo.maps.ImagePosition.BOTTOM_CENTER
        },
        blockRotation: true,
        keyboardEventTarget: document,
        constrainResolution: true,
        restriction: { latLngBounds: { west: 124.6, south: 33.114, east: 131.875, north: 42.59 }, strictBounds: true }, // 지도가 표시할 영역을 지정(해당 영역 밖으로 이동 불가)
      });
      
      // 현재 위치 표시
      document.getElementById("lat").innerText = center.lat;
      document.getElementById("lng").innerText = center.lng;
      
      // 지도 이동 완료(MOVE_END)시 현재 지도 중심 좌표 표시
      
      // 지도 드래그 시작
      map.addListener("dragstart", () => {
        document.getElementById("lat").innerText = map.getCenter().lat();
        document.getElementById("lng").innerText = map.getCenter().lng();
      });
      
      // 지도 드래그 중
      map.addListener("drag", () => {
        document.getElementById("lat").innerText = map.getCenter().lat();
        document.getElementById("lng").innerText = map.getCenter().lng();
      });
      
      // 지도 드래그 종료
      map.addListener("dragend", () => {
        document.getElementById("lat").innerText = map.getCenter().lat();
        document.getElementById("lng").innerText = map.getCenter().lng();
      });
      
      // Location Control 시작
      function start() {
        map.setActiveLocationMarker(true);
      }
      
      // Location Control 종료
      function end() {
        map.setActiveLocationMarker(false);
      }
  </script>
</body>
</html>

WEB JS