구글맵 - 원 & 직사각형 그리기

원 및 직사각형

Javascript Maps API에는 일반 Polygon 클래스 외에도 생성을 단순화할 수 있는 Circle 및 Rectangle에 대한 특정 클래스도 포함되어 있습니다.

원

Circle은 Polygon과 마찬가지로 원의 모서리('획')에 대해 맞춤 색상, 두께 및 불투명도를 정의할 수 있으며 둘러싸인 지역 내 영역('채우기')에 대해 맞춤 색상 및 불투명도를 정의할 수 있습니다. 색상은 16진수 HTML 스타일로 지정해야 합니다.

Polygon과 달리 Circle에 paths를 정의하지는 않습니다. 대신 원에는 모양을 정의하는 두 개의 추가 속성이 있습니다.

• center는 원 중심의 google.maps.LatLng를 지정합니다.
• radius는 원의 반경을 지정합니다(미터 단위).

다음 코드 스니펫은 미국의 인구를 나타내는 원을 만듭니다.

// Create an object containing LatLng, population.
var citymap = {};
citymap['chicago'] = {
  center: new google.maps.LatLng(41.878113, -87.629798),
  population: 2842518
};
citymap['newyork'] = {
  center: new google.maps.LatLng(40.714352, -74.005973),
  population: 8143197
};
citymap['losangeles'] = {
  center: new google.maps.LatLng(34.052234, -118.243684),
  population: 3844829
}
var cityCircle;

function initialize() {
  var mapOptions = {
    zoom: 4,
    center: new google.maps.LatLng(37.09024, -95.712891),
    mapTypeId: google.maps.MapTypeId.TERRAIN
  };

  var map = new google.maps.Map(document.getElementById("map_canvas"),
      mapOptions);
       
  for (var city in citymap) {
    // Construct the circle for each value in citymap. We scale population by 20.
    var populationOptions = {
      strokeColor: "#FF0000",
      strokeOpacity: 0.8,
      strokeWeight: 2,
      fillColor: "#FF0000",
      fillOpacity: 0.35,
      map: map,
      center: citymap[city].center,
      radius: citymap[city].population / 20
    };
    cityCircle = new google.maps.Circle(populationOptions);
  }
}

예 보기(circle-simple.html)

직사각형

Rectangle은 Polygon과 마찬가지로 직사각형의 모서리('획')에 대해 맞춤 색상, 두께 및 불투명도를 정의할 수 있으며 둘러싸인 지역 내 영역('채우기')에 대해 맞춤 색상 및 불투명도를 정의할 수 있습니다. 색상은 16진수 HTML 스타일로 지정해야 합니다.

Polygon과 달리 Rectangle에 paths를 정의하지는 않습니다. 대신 직사각형에는 모양을 정의하는 한 개의 추가 속성이 있습니다.

• bounds는 직사각형의 google.maps.LatLngBounds를 지정합니다.

다음 예는 모든 'zoom_changed' 이벤트에 이전 뷰포트를 기준으로 직사각형을 만듭니다.

function initialize() {

  var coachella = new google.maps.LatLng(33.6803003, -116.173894);
  var rectangle;

  var myOptions = {
    zoom: 11,
    center: coachella,
    mapTypeId: google.maps.MapTypeId.TERRAIN
  };

  var map = new google.maps.Map(document.getElementById("map_canvas"),
      myOptions);
        
  rectangle = new google.maps.Rectangle();

  google.maps.event.addListener(map, 'zoom_changed', function() {

    // Get the current bounds, which reflect the bounds before the zoom.
    var rectOptions = {
      strokeColor: "#FF0000",
      strokeOpacity: 0.8,
      strokeWeight: 2,
      fillColor: "#FF0000",
      fillOpacity: 0.35,
      map: map,
      bounds: map.getBounds()
    };
    rectangle.setOptions(rectOptions);
  });
}

예 보기(rectangle-simple.html)