mouseover、out 和 click 事件在折线上不起作用？

Question

我正在谷歌地图上绘制一个多边形，并在谷歌地图上为折线（只有一条线）提供鼠标悬停事件。 在折线上不添加事件。

function checkArea(area){

area_global = area;

  if( area.getPath().getLength() != max ){

    area.setMap(null);

    alert('Area must have 4 sides!');

  }

  else{

    areaBounds = new google.maps.LatLngBounds();

    for( i = 0; i < area.getPath().getLength(); i++ ){

        if( typeof( sides[i] ) != 'undefined' ) sides[i].setMap(null);

        start = [ area.getPath().getAt(i).lat(), area.getPath().getAt(i).lng() ];
        end = i == max - 1 ? [ area.getPath().getAt(0).lat(), area.getPath().getAt(0).lng() ] : [ area.getPath().getAt(i + 1).lat(), area.getPath().getAt(i + 1).lng() ];

        coordinates[i] = [
            new google.maps.LatLng( start[0], start[1] ),
            new google.maps.LatLng( end[0], end[1] )
        ];

        sides[i] = new google.maps.Polyline({
            path: coordinates[i],
            strokeColor: orange,
            strokeWeight: 5
        });


        sides[i].setMap(map);

        areaBounds.extend( coordinates[i][0] );

        google.maps.event.addListener(sides[i], 'mouseover', function(){   //event that fires when polygon is clicked
            if( this.strokeColor != red ) this.setOptions({ strokeColor: darkOrange, zIndex: 2 });

        });

        google.maps.event.addListener(sides[i], 'mouseout', function(){ //event that fires when polygon is clicked
            if( this.strokeColor == darkOrange ) this.setOptions({ strokeColor: orange, zIndex: 2 });

        });

        google.maps.event.addListener(sides[i], 'click', function(){ //event that fires when polygon is clicked

            for( i = 0; i < sides.length; i ++ ) sides[i].setOptions({ strokeColor: orange, zIndex: 1 });

            this.setOptions({ strokeColor: red, zIndex: 2 });

            lineBounds = new google.maps.LatLngBounds();
            lineBounds.extend( this.getPath().getAt(0) );
            lineBounds.extend( this.getPath().getAt(1) );

            var direction = google.maps.geometry.spherical.computeHeading( areaBounds.getCenter() , lineBounds.getCenter() ); //almost working.  Need to get it better for irregular shapes (trapeziums etc)

            direction = direction < 0 ? direction + 360 : direction;

            bearing = direction < 1 ? 0 : Math.round( Math.round( direction / 22.5 ) * 22.5 );

            var roofOrientation = Math.round( direction / 5 ) * 5;

            $('#roof-orientation').val( roofOrientation ).attr('data-bearing', bearings[ bearing ] );

            if( this.getPath().getAt(0).lat() > 0 && roofOrientation > 270 || this.getPath().getAt(0).lat() > 0 && roofOrientation < 90 ) alert('The closer your roof is to facing north the poorer the electricity generation will be.');

            else if( this.getPath().getAt(0).lat() < 0 && roofOrientation < 270 && roofOrientation > 90 )  alert('The closer your roof is to facing south the poorer the electricity generation will be.');

            callAPI();

        });



        if( drawingManager.getDrawingMode() ){

            drawingManager.setOptions({
                drawingMode: null
            });

        }
        /*$('#map-draw').removeClass('active').text('Click to redraw');*/

    }

    $('#area').val( Math.round( google.maps.geometry.spherical.computeArea( area.getPath() ) ) ).change();

}

Answer 1

google.maps.event.addListener(sides[i], 'mouseover', function(){   //event that fires when polygon is clicked
    if( this.strokeColor != red ) this.setOptions({ strokeColor: darkOrange, zIndex: 2 });    
}.bind( map ));

在侦听器函数中有对“this”关键字的引用——通过代码的外观调用函数和设置属性。 'this' 关键字需要引用在侦听器中具有作为目标的方法或属性的对象。否则，在这种情况下，它可能会引用 side[i] 作为对象。