Question

我正在使用谷歌地图Javascript API，我想这样做，当你点击地图上的按钮时，会弹出一个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时，没有任何反应，我甚至没有看到任何可以检查JS错误的Firefox插件中的错误。

我做错了什么？

Answer 1

根据评论并重新阅读问题，您希望在点击不在Google地图上的按钮时执行一些工作。在这种情况下，您不想使用google.maps.event.addListener，因为它会在地图上监听事件（例如点击）。

对于按钮，您可以使用jQuery click事件，或者如果您使用的是其他javascript框架，他们也可能会有点击事件。对于jQuery，您将执行以下操作：

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

addListener方法看起来像google Map对象，而不是地图的HTML元素。看一下第一个例子here。

因此，如果您还没有，那么您需要保留对实例化地图时返回的地图的引用：

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

获得地图引用后，可以使用地图对象而不是HTML元素添加侦听器。

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

Google Maps API addListener方法无效

1 个答案: