Google Maps API 3에서 마커의 DOM 요소 가져 오기

마커의 DOM 요소를 가져 오는 방법을 찾으려고합니다. Google은 표식을 표시하는 데 다른 요소를 사용하고 이벤트를 처리하는 요소를 사용하는 것으로 보입니다.Google Maps API 3에서 마커의 DOM 요소 가져 오기

지금까지 2 가지를 알아 냈습니다. fb이라는 마커 개체의 DOM 요소가 포함 된 생성 된 변수가 있지만 다음에 Google에서 API를 업데이트하면 다른 이름이 지정됩니다. 그래서 가지 마라.

둘째, 마커에 클릭 이벤트를 첨부하면 API는 이벤트 DOM 요소를 사용자가 지정한 기능에 대한 인수로 보냅니다. 파이어 버그에서 그것을보고있는 동안 나는 두 사람 사이에 어떤 관계도 찾을 수 없습니다.

DOM 요소()를 조작하고 더 많은 정보를 제공 한 다음 배경이있는 'div'요소 만 입력하면됩니다.

div 요소에 id를 생성하는 이름이없는 (문서화되지 않은) 속성을 사용하여 버전 2에서이 작업을 수행했습니다.

누구나 아이디어가 있습니까?

출처

2010-01-14 fredrik

을 당신이 정확히 무엇을 의미합니까 "그것은 먹이를"말할 때? InfoWindow 또는 Overlay 용 HTML? –

아이콘을 텍스트와 링크가있는 새 아이콘이 들어있는 html 요소로 바꿉니다. – fredrik

또한 Google이 왜이를 검색 할 원시 메소드를 구현 (및 문서화하지 않은지)하는 것이 환상적 일 것입니다. 또는 지정된 크기의 래퍼를 만드는 Marker 객체에 HTML 속성을 추가하기 만하면됩니다. 그리고 네가 얼마나 좋아하는지 너는 그걸로 어지럽 힐 수있어. – fredrik

정말 정말 나쁜 해결 방법을 발견했습니다. title 속성을 사용하여 id 속성을 전달할 수 있습니다.

fixMarkerId = function() { 
       $('div[title^="mtg_"]').each(function (index, elem) { 
        el = $(elem); 
        el.attr('id', el.attr('title')); 
        el.removeAttr('title'); 
       }); 
      }, 
      tryAgainFixMarkerId = function() { 
       if ($('div[title^="mtg_"]').length) { 
        fixMarkerId(); 
       } else { 
        setTimeout(function() { 
         tryAgainFixMarkerId(); 
        }, 100); 
       }; 
      } 

if ($('div[title^="mtg_"]').length) { 
       fixMarkerId(); 
      } else { 
       setTimeout(function() { 
        tryAgainFixMarkerId(); 
       }, 100); 
      };

난 강력하게 프로덕션 환경에이 솔루션을 권장하지 않습니다. 그러나 지금은 개발을 계속할 수 있도록 사용합니다. 그러나 여전히 더 나은 솔루션을 찾고 있습니다.

출처

2010-01-14 16:23:49 fredrik

맞춤 툴팁을 구현하기 위해 DOM 요소도 찾고있었습니다. 그래서 구글 오버레이, 사용자 지정 라이브러리로 파고 동안, 난 (jQuery를 사용하여) 프레드릭의 제목 방식에 따라 다음 해결책을 종료 한 후에 는 :

 
google.maps.event.addListener(marker, 'mouseover', function() { 

    if (!this.hovercardInitialized) { 

     var markerInDOM = $('div[title="' + this.title + '"]').get(0); 

     // do whatever you want with the DOM element 

     this.hovercardInitialized = true; 
    } 

});

희망이 사람을 도움이됩니다.

출처

2010-11-23 13:20:25 Matt

이것은 2013 년 2 월에 나에게 적합하지 않은 것으로 보입니다. – Ryan

모든 환경에 적합하지는 않지만이 방법이 유용하다는 것을 알았습니다. 마커 이미지를 설정할 때 고유 앵커를 URL에 추가하십시오. 예를 들어 :

이제

// Create the icon 
var icon = new google.maps.MarkerImage(
    "data/ui/marker.png", 
    new google.maps.Size(64, 64), 
    new google.maps.Point(0,0), 
    new google.maps.Point(48, 32) 
); 

// Determine a unique id somehow, perhaps from your data 
var markerId = Math.floor(Math.random() * 1000000); 
icon.url += "#" + markerId; 

// Set up options for the marker 
var marker = new google.maps.Marker({ 
    map: map, 
    optimized: false, 
    icon: icon, 
    id: markerId, 
    uniqueSrc: icon.url 
});

당신은 유일한 선택 예 :

$("img[src='data/ui/marker.png#619299']")

또는 마커가있는 경우 :

$("img[src='" + marker.uniqueSrc + "']")

출처

2013-05-18 08:00:21 BenjyCook

사용자 정의 오버레이 (구현하여을에서 onAdd, 그릴 , 제거) 드래그하는 동안 몇 가지 문제가 있습니다.
아마 당신은 클래스 이름 gmnoprint와가에 추가 된 인덱스에 의해 마커 DOM 요소를 얻을 수 있습니다.

출처

2013-09-23 08:12:47 user2806330

Google Maps API 3에서 마커의 DOM 요소 가져 오기

답변

관련 문제