최고의 Google지도 이벤트 튜토리얼 2024년, 이 튜토리얼에서는 마커 줌지도를 클릭,예,리셋 플래그,예,마커는 정보 창을 열려면 클릭합니다.,예,열려있는 각 윈도우의 라벨 및 태그 정보를 설정,예,구글지도 - 이벤트 매뉴얼,를 배울 수 있습니다.
Google지도 이벤트
구글 맵 이벤트에 바인딩 - 확대 마커를 클릭합니다.
마커 줌지도를 클릭
우리는 여전히 다시 런던을 사용하여 종이지도를 사용합니다.
포인트 사용자는 마커가 줌 기능 (줌지도 표시 바인딩 이벤트를 클릭)을 클릭 할 때 달성했다.
다음과 같이 코드입니다 :
예
// Zoom to 9 when clicking on marker
google.maps.event.addListener(marker,'click',function() {
map.setZoom(9);
map.setCenter(marker.getPosition());
});
»시도 이벤트 리스너를 등록의 addListener () 이벤트 핸들러를 사용합니다. 상기 방법은 목적하는 특정 이벤트를 호출할지 발생시 수신하는 이벤트를 이용한다.
리셋 플래그
우리는 3 초 center_changed가 이벤트가 변화 센터에 표시됩니다 뒤에 다음 코드를 사용하여 '센터'속성을 변경하려면지도에 이벤트 처리기를 추가 :
예
google.maps.event.addListener(map,'center_changed',function() {
window.setTimeout(function() {
map.panTo(marker.getPosition());
},3000);
});
»시도
마커는 정보 창을 열려면 클릭합니다.
메시지 창에 텍스트를 표시하는 마커를 클릭하십시오
예
var infowindow = new google.maps.InfoWindow({
content:"Hello World!"
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
»시도
열려있는 각 윈도우의 라벨 및 태그 정보를 설정
윈도우의 구현은 사용자가지도를 클릭하면
사용자는 마커를 배치하고 팝업 메시지 창을 위해 지정된 위치에 위치 장소 표시 () 함수지도를 클릭하세요 :
예
google.maps.event.addListener(map, 'click', function(event) {
placeMarker(event.latLng);
});
function placeMarker(location) {
var marker = new google.maps.Marker({
position: location,
map: map,
});
var infowindow = new google.maps.InfoWindow({
content: 'Latitude: ' + location.lat() +
'<br>Longitude: ' + location.lng()
});
infowindow.open(map,marker);
}
»시도
구글지도 - 이벤트 매뉴얼
Google지도 API 참조 설명서 .