我正在尝试将悬停事件传递给google maps v3 api，google.maps.event对象。 我试图实现的目标是使用jQuery触发外部元素的悬停效果（mouseenter / mouseout）。
下面是我正在使用的代码，试图访问多边形然后通过外部元素悬停改变它的不透明度。
$(".element-to-hover").mouseover(function(){
$(this).addClass("active-hover");
google.maps.event.addListener($(this).attr("id"),"mouseover",function(){
this.setOptions({fillOpacity: "1"});
});
});
但是，每次使用此方法时，都会返回以下错误。 “TypeError：c未定义”
我无法使用GMv3API文档找到合适的解决方案。
//编辑
如果我正在使用地图功能，则下面是最小化的片段。
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}
];
var griffintown = new google.maps.Polygon({
paths: griffintownSpec,
strokeColor: '#ffffff',
strokeOpacity: 0.8,
strokeWeight: 1,
fillColor: '#7FAFCB',
fillOpacity: 0.80
});
griffintown.setMap(map);
}
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 google.maps.event对象。
//编辑：添加了相关网站的网址。 http://pwmhosting.ca/alm/find-your-office/
//编辑：添加了悬停元素的Html
<div class="row">
<div class="control-selector-group">
<div class="control-selector-location">
<div class="selector-title"><h2>Burroughs</h2></div>
<div class="element-to-hover" id="griffintown">GRIIFFINTOWN/div>
</div>
</div>
答案 0 :(得分：2)
我的建议是制作一个全局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"></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>