Question

我正在编写一个程序来在谷歌地图上绘制路径。我希望路径在mouseover上更改颜色和笔触大小，并恢复到mouseout上的原始状态（热悬停）。这工作正常。我还想在单击路径时将路径的颜色更改为不同的颜色。这就是问题所在。颜色会发生变化，但一旦我将鼠标指针从路径上移开，它就会恢复原来的颜色。

google.maps.event.addListener(actualPath, 'mouseover', function (event) {
    actualPath.setOptions({
        strokeColor: "#00FF00",//color on mouseover
        strokeOpacity: 0.8,
        strokeWeight: 6
    });
});

google.maps.event.addListener(actualPath, 'mouseout', function (event) {
    actualPath.setOptions({
        strokeColor: "#0000FF",//original color
        strokeOpacity: 0.8,
        strokeWeight: 3
    });
});

google.maps.event.addListener(actualPath, 'click', function (event) {
    actualPath.setOptions({
        strokeColor: "#FF0000",//color I want to set on on click
        strokeOpacity: 0.8,
        strokeWeight: 3
    });
});

Answer 1

您需要在其他地方保存新颜色（通过点击获得）并在鼠标离开时调用它。

var pathColor = "#0000FF";

google.maps.event.addListener(actualPath, 'click', function (event) {
    actualPath.setOptions({
        strokeColor: "#FF0000"
        strokeOpacity: 0.8,
        strokeWeight: 3
    });

    pathColor = "#FF0000"

});

现在在mouseout中

google.maps.event.addListener(actualPath, 'mouseout', function (event) {
    actualPath.setOptions({
        strokeColor: pathColor
        strokeOpacity: 0.8,
        strokeWeight: 3
    });
});

Answer 2

这是预期的结果。您的点击事件有效，但当您移开鼠标时，也会触发“mouseout”事件。

您应该检查是否使用布尔值单击了路径。

pathClicked = false;

google.maps.event.addListener(actualPath, 'click', function (event) {
actualPath.setOptions({
    strokeColor: "#FF0000",//color I want to set on on click
    strokeOpacity: 0.8,
    strokeWeight: 3
});
pathClicked = true;
});


google.maps.event.addListener(actualPath, 'mouseout', function (event) {
if(!pathClicked){
actualPath.setOptions({
    strokeColor: "#0000FF",//original color
    strokeOpacity: 0.8,
    strokeWeight: 3
});
}
});

但是当你开始画一条新路时，你必须再次把它弄错。

JavaScript鼠标悬停事件与点击事件

2 个答案: