jQuery를 사용하여 google maps api marker 객체에 click 이벤트 핸들러를 추가하는 방법은 무엇입니까?

-1

내 HTML은 다음과 같습니다jQuery를 사용하여 google maps api marker 객체에 click 이벤트 핸들러를 추가하는 방법은 무엇입니까?

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <link rel="stylesheet" type="text/css" href="style.css"> 
    <title>MapTest</title> 
</head> 
<body> 
    <div id="mapContainer"></div> 

    <script type="text/javascript" src="scripts/jquery-3.1.0.min.js"></script> 
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB1KzIyYJuVoPB84Rum7kH5uUETV-WIgSA"></script> 
    <script type="text/javascript" src="scripts/maps.js"></script> 
</body> 
</html>

내 CSS는 다음과 같습니다

#mapContainer { 
    width : 500px; 
    height: 500px; 
}

내 jQuery를은 다음과 같습니다 관심의

$(document).ready(function() { 

    var lat = 22.688138; 
    var lng = 88.343926; 

    function initMap() 
    { 
     var latlng = new google.maps.LatLng(lat, lng); 
     var mapOpts = { 
      center : latlng, 
      zoom : 20, 
      mapTypeId : google.maps.MapTypeId.HYBRID 
     }; 

     var map = new google.maps.Map(document.getElementById("mapContainer"),mapOpts); 
     var marker = new google.maps.Marker({ 
      position : latlng, 
      map : map, 
      title : "Somu's House, Bitches!" 
     }); 

     var infoWindow = new google.maps.InfoWindow({ 
      content : "Somu's House, Bitches!" 
     }); 

     $(marker).click(function() { 
      infoWindow.open(map, marker); 
     }); 
    } 

    initMap(); 
});

요점은 다음과 같은 라인이다

$(marker).click(function() { 
    infoWindow.open(map, marker); 
});

위의 코드가 작동하지 않습니다 (오류나 경고가 발생하지 않음에도 불구하고). 그러나 JavaScript API의 샘플 코드에 따르면 올바른 JS 코드는 다음과 같습니다.

marker.addListener('click', function() { 
    infoWindow.open(map, marker); 
});

원래 코드가 작동하지 않는 이유는 무엇입니까? 위의 코드를 jQuery로 변환하려면 어떻게해야합니까? jQuery에서 동일한 결과를 얻는 올바른 방법은 무엇입니까?

출처

2016-08-25 Somenath Sinha

은 google.maps.Marker 인스턴스입니다. DOM 요소가 아닙니다. 따라서 $(marker).click()은 예상대로 작동하지 않습니다. "마커 개체"를 클릭하지 마십시오.

마커의 addListener 메서드를 사용하면 올바른 방법입니다.

출처

2016-08-25 08:18:20 Chiu

그래서 jQuery에서이를 구현하는 방법은 일반적인 JavaScript에서이를 달성하는 방법과 완전히 똑같습니까? jQuery를 사용하여 코드를 더 간단하게 만들 수있는 변경 사항이 있습니까? –

클릭 한 정확한 DOM 요소를 찾는 jQuery 메서드를 사용해서는 안된다고 생각합니다. 나는 그것이 매우 복잡하고 불필요 할 것으로 기대한다. – Chiu

JQuery를 자바 스크립트로 사용할 수있는 이유는 무엇입니까? – John

jQuery를 사용하여 google maps api marker 객체에 click 이벤트 핸들러를 추가하는 방법은 무엇입니까?

답변

관련 문제