如何添加點擊事件處理程序到谷歌地圖使用jQuery的api標記對象？

-1

我的HTML是：如何添加點擊事件處理程序到谷歌地圖使用jQuery的api標記對象？

<!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使代碼更簡單的更改？ –

我不認爲你應該用任何jQuery方法來做到這一點，它包括找到你點擊的確切的DOM元素。我期望它是非常複雜和不必要的。 – Chiu

爲什麼使用JQuery時，你可以用JavaScript做到這一點？ – John

如何添加點擊事件處理程序到谷歌地圖使用jQuery的api標記對象？

回答

相關問題