반응형
Google Map API V3 : 마커에 맞춤 데이터를 추가하는 방법
나중에 사용할 수 있도록 마커에 사용자 지정 정보를 추가 할 수있는 방법이 있습니까? 정보 창과 제목을 갖는 방법이 있지만 마커를 다른 정보와 연결하려면 어떻게해야합니까?
마커에 따라 다른 항목이 페이지에 표시되므로 마커를 클릭하면 클릭 한 마커에 따라 페이지의 콘텐츠가 변경되어야합니다. 클릭 등
감사
Google 마커는 자바 스크립트 개체이므로 key: value
키는 유효한 문자열 인 양식에 맞춤 정보를 추가 할 수 있습니다 . 이를 개체 속성 이라고하며 다양한 방법으로 접근 할 수 있습니다. 값은 숫자 나 문자열과 같은 단순한 합법적이거나 함수 또는 다른 객체 일 수 있습니다. 세 가지 간단한 방법 : 선언, 점 표기법 및 대괄호
var markerA = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(0, 0),
customInfo: "Marker A"
});
var markerB = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(-10, 0)
});
markerB.customInfo = "Marker B";
var markerC = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(-20, 0)
});
markerC['customInfo'] = "Marker C";
그런 다음 유사한 방식으로 검색하려면 :
google.maps.event.addListener(markerA, 'click', function() {
alert(this.customInfo);
});
마커에 사용자 지정 속성을 추가 할 수 있습니다 (API의 속성과 충돌하지 않도록주의하십시오).
참고 URL : https://stackoverflow.com/questions/11378450/google-map-api-v3-how-to-add-custom-data-to-markers
반응형
'developer tip' 카테고리의 다른 글
pow (a, d, n)이 a ** d % n보다 훨씬 빠른 이유는 무엇입니까? (0) | 2020.08.07 |
---|---|
Rails : UTC DateTime을 다른 시간대로 변환 (0) | 2020.08.07 |
투명한 HTML 버튼을 만드는 방법은 무엇입니까? (0) | 2020.08.07 |
ES6 모듈에서 여러 클래스 내보내기 (0) | 2020.08.07 |
INFORMATION_SCHEMA를 사용하여 기본 제약 조건을 어떻게 찾습니까? (0) | 2020.08.07 |