나는 이미지와 함께 구글 맵 마커를 대체 할 수있어 이미지 사용자 정의 모양의 마커 (Google지도 맵 API v3의)

Question

만드는 방법 :

이를 사용하여

나는 동적으로 사용자에게지도에 아바타를로드를 , 지금은

이 작동하고 있지만, 그래픽 결과는 내가 원하는 것이 아니다 : 여기

var icon = { 
     // i get images url dynamically with html5 data attributes 
     url: $marker.attr('data-icon'), // url 

     scaledSize: new google.maps.Size(50, 50), // scaled size 
     origin: new google.maps.Point(0, 0), // origin 
     anchor: new google.maps.Point(0, 0) // anchor 


    }; 

는 결과이다. 나는 (내가이 예제를 디자인하지 않았다하지만 당신은 아이디어를 볼 수 있습니다) 뭔가를하고 싶은 :

내가 3 가능한 해결책을 생각했다 :

1 뒤에 다각형 만들기 테두리와 일종의 화살을 만들기 위해 이미지.

2) 부하 2 이미지 : 아바타 이미지 및 사용자 정의 핀 (의 그래픽 이미지 뒤에하지 않도록 그것은 마커 2 개 이미지)

3)와 같은 마커에 대한 사용자 정의 CSS를 할 수있는 가능성을 추가를로드 할 수 있어요 이 질문에이 대답 :

JS Maps v3: custom marker with user profile picture 데모 : http://jsfiddle.net/mfirdaus/DVKEj/

것은 무엇이를 달성하는 가장 좋은 방법이 될 것입니다?

Answer 1

1)지도를 확대/축소 할 때 이미지가 특정 위치에 고정되고 특정 위치에 앵커가 고정되지만 확대/축소가 변경되면 더 이상 동기화되지 않을 수 있습니다.

2) 아니, 당신이이 방법에 가고 싶어 경우 사진 및 프레임의 이미지를 병합하여 백엔드에 한 이미지를 생성해야하고 그

3를로드 할 표준 google.maps.Marker 두 가지 이미지를로드 할 수 없습니다) 예를 들어 연결 한 예제에 따라 google.maps.OverlayView을 확장하는 것은 맞춤 마커로 이동하는 것이 좋습니다. 당신은 그들에게 당신 자신의 커스텀 HTML/CSS/JS 기능을 제공 할 수 있으며, 그것보다 더 많은 자유를 얻을 수는 없습니다. 오버레이에 대한 자세한 내용은 docs 공식에서 확인할 수 있습니다.

확실히 3으로 가야합니다. 3) 대신 2)를 사용하는 경우에만 동시에 10000 개의 마커를 표시해야하지만,이 경우에도 처음으로 MarkerClusterer을 표시합니다. 시험. 사용자 정의보고 몇 가지를 추가하고자한다면 나중에 문제에 대한 RichMarker, 또는 InfoBubble을 사용할 수 있습니다 예를 들어, 많은 일반적인 작업에 대한 몇 가지 사용하기 쉬운 솔루션을 제공하는, 아니 적어도, Google Maps Utility Libraries을 확인

마지막으로 마커를 클릭하면 거품이 생깁니다.