javascript - 多边形不触发鼠标悬停事件

Question

单击按钮时，会向服务器端发出 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}); });

                    }

        });
});

Answer 1

您需要删除 clickable: false 或使其成为 clickable: true(默认)

您不必绑定(bind)到所有事件(即单击)，但 clickable: false 会禁用所有鼠标事件...