javascript - Google map API addListener 方法不起作用

Question

我正在使用 Google Maps Javascript API，我希望当您单击 map 上的按钮时，会弹出 JS 警报。

这是我到目前为止的 JS 代码:

var gmap = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);

// Setting up and adding the boundary-changing buttons                                                  
var boundaryChangeArr = [
    '<h3 id="boundary-change-title">Change boundaries</h3>',
    '<div id="boundary-change-buttons-container">',
        '<input id="boundaries-states" class="boundary-change-button" type="button" name="StatesBoundaries" value="States" />',
        '<input id="boundaries-counties" class="boundary-change-button" type="button" name="CountiesBoundaries" value="Counties" />',
        '<input id="boundaries-tracts" class="boundary-change-button" type="button" name="TractsBoundaries" value="Tracts" />',
    '</div>'
];

// If there is no div  with the id 'boundary-change-container', make one
var boundaryChange = $('div#boundary-change-container');
if(boundaryChange.length===0){
    var boundaryChange = document.createElement('div');
    boundaryChange.id = 'boundary-change-container';
    boundaryChange.innerHTML = boundaryChangeArr.join('');
    gmap.controls[google.maps.ControlPosition.LEFT_BOTTOM].push(boundaryChange);
}; // DONE: if(boundaryChange.length===0)

google.maps.event.addListener(document.getElementById('boundaries-states'),
    'click',
    function(){
        alert('clicked');
    });

但是当我点击boundaries-states按钮时，什么也没有发生，我什至在 Firebug(可以检查 JS 错误的 Firefox 插件)中没有看到任何错误。

我做错了什么？

Answer 1

根据评论和重新阅读问题，您希望在单击按钮而不是 Google map 上时执行一些工作。在这种情况下，您不想使用 google.maps.event.addListener，因为它会监听 map 本身的事件(例如点击)。

对于按钮，您可以使用 jQuery click 事件，或者如果您使用不同的 JavaScript 框架，它们也可能有一个 click 事件。对于 jQuery，您将执行以下操作:

$('#boundaries-states').click(function () {
    //Do something
});

<小时/>

看起来 addListener 方法采用的是 google Map 对象，而不是 map 的 HTML 元素。看第一个例子here .

因此，如果您还没有这样做，则需要保留对实例化 map 时返回的 map 的引用:

var map = new google.maps.Map(document.getElementById('boundaries-states'),
  mapOptions);

获得 map 引用后，您可以使用 map 对象而不是 HTML 元素添加监听器。

google.maps.event.addListener(map, 'click', function() {
  alert('clicked');
});