[javascript] Google지도에서 한 지점 주변의 반경 그리기

Program / 글쓴이

Google Maps API를 사용 중이며 마커를 추가했습니다. 이제 각 마커 주위에 10 마일 반경을 추가하려고합니다. 즉, 확대 / 축소하는 동안 적절하게 작동하는 원을 의미합니다. 나는 그것을하는 방법을 모른다. 그리고 그것은 흔한 일이 아닌 것 같다.

괜찮아 보이는 한 가지 예를 찾았 으며 Google 위치 찾기도 살펴볼 수 있습니다. 내가 원하는 것처럼 반경이있는 마커를 사용합니다.

업데이트 : Google Latitude 는 크기가 조정 된 이미지 를 사용 합니다 . 어떻게 작동합니까? (사용되지 않는 기능)

답변

Google Maps API V3를 사용하여 Circle 객체를 만든 다음 bindTo ()를 사용하여 마커의 위치에 연결합니다 (둘 다 google.maps.MVCObject 인스턴스이므로).

// Create marker 
var marker = new google.maps.Marker({
  map: map,
  position: new google.maps.LatLng(53, -2.5),
  title: 'Some location'
});

// Add circle overlay and bind to marker
var circle = new google.maps.Circle({
  map: map,
  radius: 16093,    // 10 miles in metres
  fillColor: '#AA0000'
});
circle.bindTo('center', marker, 'position');

fillColor, strokeColor, strokeWeight 등 ( 전체 API ) 을 변경하여 Google Latitude 원처럼 보이게 만들 수 있습니다 .

더 많은 소스 코드와 예제 스크린 샷을 참조하십시오 .

답변

이를 달성하는 가장 일반적인 방법은 원을 시뮬레이션하기에 충분한 점으로 GPolygon 을 그리는 것 같습니다 . 참조한 예제는이 방법을 사용합니다. 이 페이지 에는 좋은 예가 있습니다. 소스 코드에서 drawCircle 함수를 찾으세요 .

답변

구형 기하학에서 모양은 점, 선 및 해당 선 사이의 각도로 정의됩니다. 작업 할 기본적인 가치 만 있습니다.

따라서 원 (구에 투영되는 모양)은 점을 사용하여 근사해야하는 것입니다. 포인트가 많을수록 원처럼 보입니다.

그래도 Google지도가 지구를 평평한 표면에 투영하고 있음을 인식 하십시오 (지구를 “펼쳐”서 “정사각형”으로 보일 때까지 늘리고 평평하게하는 것을 생각해보십시오). 평면 좌표계가있는 경우 원하는대로 2D 개체를 그릴 수 있습니다.

즉 , Google지도에 축척 된 벡터 원을 그릴 수 있습니다. 문제는 Google지도가 기본적으로 제공하지 않는다는 것입니다 (실용적으로 가능한 한 GIS 값에 가깝게 유지하려고합니다). 원을 근사화하는 데 사용할 GPolygon 만 제공합니다. 그러나이 사람은 IE 용 vml과 다른 브라우저 용 svg를 사용했습니다 ( “SCALED CIRCLES”섹션 참조).

이제 크기가 조정 된 원 이미지를 사용하여 Google Latitude에 대한 질문으로 돌아갑니다 (그리고 이것은 아마도 가장 유용 할 것입니다). 원의 반경이 절대 변경되지 않는다는 것을 안다면 (예를 들어 항상 어떤 지점을 중심으로 10 마일 정도) 가장 쉬운 해결책은 이미지 URL + 이미지가 나타내는 GLatLngBounds 인 GGroundOverlay 를 사용하는 것 입니다. 그런 다음 수행해야 할 유일한 작업은 10 마일 반경을 나타내는 GLatLngBounds를 연결 하는 것입니다. 일단 당신이 그것을 가지고 있으면 Google지도 API는 사용자가 확대 및 축소 할 때 이미지 크기 조정을 처리합니다.

답변

예전에이 문제가 있었기 때문에이 토론을 북마크했습니다 .

요약하면 다음과 같이 할 수 있습니다.

  1. 이 원형 필터 의 소스 코드를 살펴보고 이를 프로젝트에 통합하는 방법을 알아 봅니다.
  2. 원을 시뮬레이션하기에 충분한 점으로 GPolygon을 그립니다.
  3. http://www.nearby.org.uk/google/circle.kml.php?radius=30miles&lat=40.173&long=-105.1024 를 수정 한 다음 가져 와서 KML 파일을 생성 합니다. Google지도에서는 ​​검색 창에 URI를 붙여 넣기 만하면지도에 표시됩니다. 그래도 API를 사용하여 어떻게 할 수 있는지 잘 모르겠습니다.

답변

이 문제를 정확히 다루는 블로그 기사를 방금 작성했습니다.
http://seewah.blogspot.com/2009/10/circle-overlay-on-google-map.html

기본적으로 올바른 GLatLngBounds로 GGroundOverlay를 만들어야합니다. 까다로운 부분은 원하는 반경을 기준으로이 원을 경계로하는이 가상 사각형 (GLatLngBounds)의 남서쪽 모서리 좌표와 북동쪽 모서리 좌표를 계산하는 것입니다. 수학은 매우 복잡하지만 블로그에서 getDestLatLng 함수를 참조하면됩니다. 나머지는 매우 간단합니다.

답변

API v3 솔루션은 다음을 참조하십시오.

http://blog.enbake.com/draw-circle-with-google-maps-api-v3

점 주위에 원을 만든 다음 범위 내외의 마커를 다른 색상으로 표시합니다. 그들은 또한 동적 반경을 계산하지만 귀하의 경우 반경이 고정되어 작업량이 적을 수 있습니다.

답변