单击按钮时,会向服务器端发出 AJAX 请求,返回多个多边形路径。然后将这些多边形绘制到 map 上。
问题:我为 mouseover
和 mouseout
事件添加了事件处理程序。然而,他们似乎并没有开火。处理程序包含 console.log
,它不会在鼠标悬停时执行。可能是什么原因造成的?
JS代码
$("#button").click(function() {
$.getJSON(base_url + 'main/get',
function(json) {
for( var i = 0; i < json.length; i++) {
decoded_path = google.maps.geometry.encoding.decodePath(json[i].encoded_path);
var polyOptions = {
strokeColor: "#4794b8",
strokeOpacity: 0.7,
strokeWeight: 1.5,
fillColor: "#000",
fillOpacity: 0.1,
path: decoded_path,
clickable: false,
map: map
}
var polygon = new google.maps.Polygon(polyOptions);
array_polyline.push(polygon);
// Add Mouseover/Mouseout Listeners
google.maps.event.addListener(polygon, "mouseover", function(){ console.log('Mouseover'); this.setOptions({fillOpacity: 0}); });
google.maps.event.addListener(polygon, "mouseout", function(){ this.setOptions({fillOpacity: 0.1}); });
}
});
});
最佳答案
您需要删除 clickable: false
或使其成为 clickable: true
(默认)
您不必绑定(bind)到所有事件(即单击),但 clickable: false
会禁用所有鼠标事件...
关于javascript - 多边形不触发鼠标悬停事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8597182/