Google지도 API v3의 HTML5 캔버스 위치 표시

Question

복잡한 위치 표시 (또는 장소 표시에 '첨부 된'오버레이)를 생성 할 수있는 방법을 찾고 있습니다.

지도 v3 API를 사용하여 장소 표시에 첨부/덮어 쓰는 방법이 있습니까?

아니면 Google API 외부에서 그림을 그려야하며 사용자가지도를 팬하면 다시 그려주는 수신기가 있어야하나요?

Answer 1

이것은 쉽게 수행 할 수 있으므로 답변이 더 일찍 나타나지 않아서 유감입니다. 다행히도 이것은 당신에게 여전히 유용합니다.

은 참조 : http://code.google.com/apis/maps/documentation/javascript/overlays.html#CustomOverlays

그리고 여기가 예입니다 : http://code.google.com/apis/maps/documentation/javascript/examples/overlay-simple.html

당신은 수 있도록 OverlayView를 확장하는 자바 스크립트 클래스를 구현해야합니다. 구체적으로지도의 상태가 변경 될 때마다 (예 : 드래그 또는 확대/축소)지도 API가 호출하는 draw() 메소드를 작성합니다.

그런 방법으로 HTML5 캔버스 (또는 실제로는 무엇이든)를 만들고 필요한 것을 그릴 수 있습니다. 기본지도 투영에 액세스하면 LatLng를 현재 확대/축소 수준 및 투영 유형의 픽셀로 안정적으로 변환 할 수 있습니다.

Answer 2

당신은에서 onAdd에서 당신은 아마 구글의 창에 대한 참조를 설정할 수 있습니다에서 onAdd를 (우선 대상),() 무승부을 google.maps.OverlayView을 확장하고, onRemove()

합니다. maps.MapPanes에 마크 업을 넣으십시오. 그런 다음 이동 및 확대/축소 이벤트를 처리해야합니다. 캔버스 그리기에 유용하기 위해서는

CustomOverlayView.prototype.initPanes = function() { 
var panes = this.getPanes(); //object of type google.maps.MapPanes 
this.drawPane = jQuery(panes.floatPane); //we will initialize our stuff in this div element 
this.drawPane.attr("id", "map-draw-pane"); //conceivable to want to reference this, usefull for debugging 
this.drawPane.css("background-color", "transparent"); //DONT COVER THE GOOGLE COPYRIGHT 
}; 

, 당신은 google.maps.LatLng는 x와 y 변수 포인트 객체로 객체 변환하는 방법이 필요합니다 : 당신은 너무처럼 그렇게. 그 답은 google.maps.MapCanvasProjection에서 google.maps.LatLng 객체로 인코딩 된 위치 객체를 유용한 픽셀 좌표로 (그리고 다시) 계산하는 다양한 메소드가 있습니다.

var projection = this.getProjection();//google.maps.MapCanvasProjection 
var drawingLocationPoint = projection.fromLatLngToContainerPixel(markerData.location); 

구글의 캔버스를 넣어하는 방법에 대한 몇 가지 세부 사항은 여기에 매핑 : http://www.samedwards.net

Answer 3

나는 캔버스 오버레이 만들기위한이 반 공식 확장 라이브러리 보는 것이 좋습니다 것

:

http://google-maps-utility-library-v3.googlecode.com/svn/trunk/canvaslayer/

을 http://google-maps-utility-library-v3.googlecode.com/svn/trunk/canvaslayer/examples/hello2d.html

이 샘플에는 대신 lraphael이 사용되었지만 마커를 사용하여 개체를 추가로 연결할 수 있습니다

http://gmaps-samples-v3.googlecode.com/svn/trunk/cloud/cloud.html