将变量传递给Google Maps事件对象.(谷歌地图多边形，外部元素悬停)

我的建议是创建一个全局的polygons数组，由多边形的id索引。

// in the global scope
var polygons = [];

:

// Construct the polygon.
var cartierville = new google.maps.Polygon({
    paths: cartiervilleSpec,
    strokeColor: '#ffffff',
    strokeOpacity: 0.8,
    strokeWeight: 1,
    fillColor: '#DC3B35',
    fillOpacity: 0.80
});
cartierville.setMap(map);
// add it to the global array
polygons["cartierville"] = cartierville;
google.maps.event.addListener(cartierville, "mouseover", function () {
    this.setOptions({
        fillOpacity: "1"
    });
    $("#cartierville").addClass("active-hover");
});
google.maps.event.addListener(cartierville, "mouseout", function () {
    this.setOptions({
        fillOpacity: "0.80"
    });
    $("#cartierville").removeClass("active-hover");
});
var griffintown = new google.maps.Polygon({
    paths: griffintownSpec,
    strokeColor: '#ffffff',
    strokeOpacity: 0.8,
    strokeWeight: 1,
    fillColor: '#7FAFCB',
    fillOpacity: 0.80
});
griffintown.setMap(map);
// add it to the global array
polygons["griffintown"] = griffintown;
google.maps.event.addListener(griffintown, "mouseover", function () {
    this.setOptions({
        fillOpacity: 1
    });
    $("#griffintown").addClass("active-hover");
});
google.maps.event.addListener(griffintown, "mouseout", function () {
    this.setOptions({
        fillOpacity: 0.80
    });
    $("#griffintown").removeClass("active-hover");
});

然后你可以像这样添加mouseover/mouseout监听器:

$(".selector-selection").mouseover(function () {
    $(this).addClass("active-hover");
    polygons[$(this).attr("id")].setOptions({
        fillOpacity: 1
    });
});
$(".selector-selection").mouseleave(function () {
    $(this).removeClass("active-hover");
    polygons[$(this).attr("id")].setOptions({
        fillOpacity: 0.80
    });
});

概念验证

代码片段:

var map;
var polygons = [];
function initialize() {
  geocoder = new google.maps.Geocoder();
  var latlng = new google.maps.LatLng(45.509399, -73.631484);
  var mapOptions = {
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    styles: [{
      "featureType": "administrative",
      "elementType": "labels.text.fill",
      "stylers": [{
        "color": "#444444"
      }]
    }, {
      "featureType": "landscape",
      "elementType": "all",
      "stylers": [{
        "color": "#f2f2f2"
      }]
    }, {
      "featureType": "poi",
      "elementType": "all",
      "stylers": [{
        "visibility": "off"
      }]
    }, {
      "featureType": "road",
      "elementType": "all",
      "stylers": [{
        "saturation": -100
      }, {
        "lightness": 45
      }]
    }, {
      "featureType": "road.highway",
      "elementType": "all",
      "stylers": [{
        "visibility": "simplified"
      }]
    }, {
      "featureType": "road.highway",
      "elementType": "geometry.fill",
      "stylers": [{
        "visibility": "on"
      }, {
        "saturation": "0"
      }, {
        "lightness": "-17"
      }]
    }, {
      "featureType": "road.arterial",
      "elementType": "labels.icon",
      "stylers": [{
        "visibility": "off"
      }]
    }, {
      "featureType": "transit",
      "elementType": "all",
      "stylers": [{
        "visibility": "off"
      }]
    }, {
      "featureType": "water",
      "elementType": "all",
      "stylers": [{
        "color": "#171f4a"
      }, {
        "visibility": "on"
      }]
    }],
    center: latlng,
    zoom: 12
  };
  map = new google.maps.Map(document.getElementById('googleMappingContainer'), mapOptions);
  var griffintownSpec = [{
    lat: 45.498276,
    lng: -73.561388
  }, {
    lat: 45.490125,
    lng: -73.567316
  }, {
    lat: 45.485214,
    lng: -73.566365
  }, {
    lat: 45.492362,
    lng: -73.553377
  }, {
    lat: 45.494958,
    lng: -73.554621
  }, {
    lat: 45.495638,
    lng: -73.555167
  }, {
    lat: 45.496127,
    lng: -73.556017
  }, {
    lat: 45.498276,
    lng: -73.561388
  }];
  // Define the LatLng coordinates for the polygon's path.
  var cartiervilleSpec = [{
    lat: 45.584436,
    lng: -73.653354
  }, {
    lat: 45.575435,
    lng: -73.635593
  }, {
    lat: 45.564502,
    lng: -73.644627
  }, {
    lat: 45.554849,
    lng: -73.622688
  }, {
    lat: 45.550667,
    lng: -73.629578
  }, {
    lat: 45.549594,
    lng: -73.635563
  }, {
    lat: 45.527110,
    lng: -73.651303
  }, {
    lat: 45.532762,
    lng: -73.672160
  }, {
    lat: 45.530772,
    lng: -73.683041
  }, {
    lat: 45.528497,
    lng: -73.685711
  }, {
    lat: 45.528244,
    lng: -73.693001
  }, {
    lat: 45.522278,
    lng: -73.707653
  }, {
    lat: 45.525109,
    lng: -73.712272
  }, {
    lat: 45.523036,
    lng: -73.714220
  }, {
    lat: 45.526883,
    lng: -73.720741
  }, {
    lat: 45.521627,
    lng: -73.727325
  }, {
    lat: 45.523843,
    lng: -73.730999
  }, {
    lat: 45.520840,
    lng: -73.735133
  }, {
    lat: 45.515726,
    lng: -73.728039
  }, {
    lat: 45.508788,
    lng: -73.747975
  }, {
    lat: 45.504890,
    lng: -73.754049
  }, {
    lat: 45.510612,
    lng: -73.759969
  }, {
    lat: 45.512257,
    lng: -73.756549
  }, {
    lat: 45.512293,
    lng: -73.752671
  }, {
    lat: 45.516513,
    lng: -73.749149
  }, {
    lat: 45.517872,
    lng: -73.747108
  }, {
    lat: 45.518408,
    lng: -73.744658
  }, {
    lat: 45.525774,
    lng: -73.739248
  }, {
    lat: 45.527133,
    lng: -73.735268
  }, {
    lat: 45.529957,
    lng: -73.732818
  }, {
    lat: 45.530243,
    lng: -73.729909
  }, {
    lat: 45.535856,
    lng: -73.723581
  }, {
    lat: 45.537107,
    lng: -73.720519
  }, {
    lat: 45.537787,
    lng: -73.714139
  }, {
    lat: 45.539109,
    lng: -73.711434
  }, {
    lat: 45.544578,
    lng: -73.705361
  }, {
    lat: 45.547723,
    lng: -73.694286
  }, {
    lat: 45.547223,
    lng: -73.690102
  }, {
    lat: 45.549010,
    lng: -73.687141
  }, {
    lat: 45.549332,
    lng: -73.681783
  }, {
    lat: 45.555872,
    lng: -73.673515
  }, {
    lat: 45.561053,
    lng: -73.670657
  }, {
    lat: 45.565877,
    lng: -73.662185
  }, {
    lat: 45.578452,
    lng: -73.660552
  }, {
    lat: 45.580917,
    lng: -73.656571
  }, {
    lat: 45.584489,
    lng: -73.653509
  }];
  // Construct the polygon.
  var cartierville = new google.maps.Polygon({
    paths: cartiervilleSpec,
    strokeColor: '#ffffff',
    strokeOpacity: 0.8,
    strokeWeight: 1,
    fillColor: '#DC3B35',
    fillOpacity: 0.80
  });
  cartierville.setMap(map);
  polygons["cartierville"] = cartierville;
  google.maps.event.addListener(cartierville, "mouseover", function() {
    this.setOptions({
      fillOpacity: "1"
    });
    $("#cartierville").addClass("active-hover");
  });
  google.maps.event.addListener(cartierville, "mouseout", function() {
    this.setOptions({
      fillOpacity: "0.80"
    });
    $("#cartierville").removeClass("active-hover");
  });
  var griffintown = new google.maps.Polygon({
    paths: griffintownSpec,
    strokeColor: '#ffffff',
    strokeOpacity: 0.8,
    strokeWeight: 1,
    fillColor: '#7FAFCB',
    fillOpacity: 0.80
  });
  griffintown.setMap(map);
  polygons["griffintown"] = griffintown;
  var bounds = new google.maps.LatLngBounds();
  for (var i = 0; i < griffintownSpec.length; i++) {
    bounds.extend(new google.maps.LatLng(griffintownSpec[i].lat, griffintownSpec[i].lng));
  }
  for (var i = 0; i < cartiervilleSpec.length; i++) {
    bounds.extend(new google.maps.LatLng(cartiervilleSpec[i].lat, cartiervilleSpec[i].lng));
  }
  map.fitBounds(bounds);
  google.maps.event.addListener(griffintown, "mouseover", function() {
    this.setOptions({
      fillOpacity: 1
    });
    $("#griffintown").addClass("active-hover");
  });
  google.maps.event.addListener(griffintown, "mouseout", function() {
    this.setOptions({
      fillOpacity: 0.80
    });
    $("#griffintown").removeClass("active-hover");
  });
}
function codeAddress() {
  geocoder.geocode({
    'address': address
  }, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
      map.setCenter(results[0].geometry.location);
      var marker = new google.maps.Marker({
        position: results[0].geometry.location,
        map: map
      });
    } else {
      alert('Geocode was not successful for the following reason: ' + status);
    }
  });
}
google.maps.event.addDomListener(window, "load", initialize);
$(function() {
  $(".control-buttons div").click(function() {
    $(this).toggleClass("step-complete");
  });
  $(".selector-selection").mouseover(function() {
    $(this).addClass("active-hover");
    polygons[$(this).attr("id")].setOptions({
      fillOpacity: 1
    });
  });
  $(".selector-selection").mouseleave(function() {
    $(this).removeClass("active-hover");
    polygons[$(this).attr("id")].setOptions({
      fillOpacity: 0.80
    });
  });
});

html,
body,
#googleMappingContainer {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}
.control-selector-group {
  height: 0;
  overflow: visible;
  float: right;
  position: relative;
  top: 80px;
}
.control-selector-location div {
  background: #ffffff;
  height: 46px;
  width: 300px;
  margin: 0 0 2px 0;
  display: block;
  clear: both;
  line-height: 46px;
  text-align: left;
  padding: 0 20px;
}
.control-selector-location .selector-title h2 {
  font-size: 20px;
  color: #18204a;
  line-height: 46px;
}
.control-selector-location .selector-selection {
  text-transform: uppercase;
  font-weight: lighter;
  cursor: pointer;
}
.control-selector-location .selector-selection:hover {
  background: orange;
}
.active-hover#griffintown {
  background-color: #7FAFCB;
  color: #ffffff;
}
.active-hover#cartierville {
  background-color: #DC3B35;
  color: #ffffff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div class="selector-selection" class="element-to-hover" id="griffintown">GRIFFINTOWN</div>
<div class="selector-selection" id="cartierville">CARTIERVILLE</div>
<div id="googleMappingContainer"></div>