routo Developers

현재 위치: [,]

$(() => {
  const center = {
    lat: 37.52997778,
    lng: 126.96464444
  };

  // 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 }, // 지도가 표시할 영역을 지정(해당 영역 밖으로 이동 불가)
  });

  // 현재 위치 표시
  $('#lat').text(center.lat);
  $('#lng').text(center.lng);

  // 지도 이동 완료(MOVE_END)시 현재 지도 중심 좌표 표시
  
  // 지도 드래그 시작
  map.addListener("dragstart", () => {
    $('#lat').text(map.getCenter().lat());
    $('#lng').text(map.getCenter().lng());
  });

  // 지도 드래그 중
  map.addListener("drag", () => {
    $('#lat').text(map.getCenter().lat());
    $('#lng').text(map.getCenter().lng());
  });

  // 지도 드래그 종료
  map.addListener("dragend", () => {
    $('#lat').text(map.getCenter().lat());
    $('#lng').text(map.getCenter().lng());
  });

  // Location Control 시작
  $('#start-location-control').on('click', (e) => {
    map.setActiveLocationMarker(true);
  });

  // Location Control 종료
  $('#end-location-control').on('click', (e) => {
    map.setActiveLocationMarker(false);
  });

});

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Location Control</title>
  
<style>
html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

.map {
  width: 100%;
  height: 400px;
  position: relative;
}</style>
  
<style>
.tool-bar {
  position: absolute;
  left: 10px;
  top: 10px;
  z-index: 10;
}
.routo-location {
  position:absolute;
}
</style>
</head>
<body>
  <div class="map" id="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">현재 위치 지정</button>
    <button id="end-location-control" class="button">현재 위치 지정 종료</button>
  </div>
</body>
<script src="https://www.routo.com/assets/js/jquery-3.6.0.min.js"></script>
<script src="https://api.routo.com/v2/maps/map?key=12290cd4-7094-43e8-a936-8819196d0332"></script>
<script>
$(() => {
  const center = {
    lat: 37.52997778,
    lng: 126.96464444
  };

  // 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 }, // 지도가 표시할 영역을 지정(해당 영역 밖으로 이동 불가)
  });

  // 현재 위치 표시
  $('#lat').text(center.lat);
  $('#lng').text(center.lng);

  // 지도 이동 완료(MOVE_END)시 현재 지도 중심 좌표 표시
  
  // 지도 드래그 시작
  map.addListener("dragstart", () => {
    $('#lat').text(map.getCenter().lat());
    $('#lng').text(map.getCenter().lng());
  });

  // 지도 드래그 중
  map.addListener("drag", () => {
    $('#lat').text(map.getCenter().lat());
    $('#lng').text(map.getCenter().lng());
  });

  // 지도 드래그 종료
  map.addListener("dragend", () => {
    $('#lat').text(map.getCenter().lat());
    $('#lng').text(map.getCenter().lng());
  });

  // Location Control 시작
  $('#start-location-control').on('click', (e) => {
    map.setActiveLocationMarker(true);
  });

  // Location Control 종료
  $('#end-location-control').on('click', (e) => {
    map.setActiveLocationMarker(false);
  });

});
</script>
</html>

WEB JS