Google Maps: Event listener finds only the latest added object
I have a mouseover function on multiple polygons but when I mouseover the polygon I added first, the event listener always use the latest added polygon.
Here is my code:
EDITED after Jons suggestions. Google Maps seems to hang with this code...
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps JavaScript API v3 Example: Polygon Simple</title>
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
function initialize() {
var myLatLng = new google.maps.LatLng(64.75539,11.557617);
var myOptions = {
zoom: 5,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.TERRAIN,
disableDoubleClickZoom: true
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var counties = [
[ new google.maps.LatLng(65.5938045448117, 18.1841615957621), new google.maps.LatLng(65.60908024341229, 18.0771327994505), new google.maps.LatLng(65.648282356232, 17.797014589131), new google.maps.LatLng(65.6726402881329, 17.6650173420103), new google.maps.LatLng(66.05487225660011, 16.7827851638447), new google.maps.LatLng(66.0563835399301, 16.5826047275627), new google.maps.LatLng(66.30204247803511, 15.826110215697), new ... ],
[ new google.maps.LatLng(60.2679550905311, 13.9522771739341), new google.maps.LatLng(60.1898004284838, 1开发者_JAVA百科3.9706839102235), new google.maps.LatLng(60.2696058042898, 13.8508890937951), new google.maps.LatLng(60.4187463068127, 13.6952984208179), new google.maps.LatLng(60.4226284842923, 13.5706921611819), new google.maps.LatLng(60.448328778914, 13.4996704338411), new ... ]
];
var polygons = new Array();
for (var i = 0; i < counties.length; i++)
{
polygons[i] = new google.maps.Polygon({
paths: counties[i],
strokeColor: "#FF0000",
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: "#FF0000",
fillOpacity: 0.35,
isSelected: false
});
polygons[i].setMap(map);
google.maps.event.addListener(polygons[i],'click',function(event) {
toggleSelection(polygons[i]);
});
google.maps.event.addListener(polygons[i],'mouseover',function(event) {
polygons[i].setOptions({ fillOpacity: 0.45 });
});
google.maps.event.addListener(polygons[i],'mouseout',function(event) {
if (!polygons[i].isSelected)
{
polygons[i].setOptions({ fillOpacity: 0.35 });
}
});
}
}
function toggleSelection(polygon)
{
if (polygon.isSelected)
{
polygon.setOptions({ fillOpacity: 0.35 });
polygon.isSelected = false;
}
else
{
polygon.setOptions({ fillOpacity: 0.45 });
polygon.isSelected = true;
}
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas"></div>
</body>
</html>
You have to store every polygon in an array, and then add the event listener for each element of the array. Otherwise, you're rewriting the event listener for the latest polygon. I had to do the same with a bunch of markers in my application. It's unfortunate for memory consumption, but as long as you aren't dealing with hundreds of polygons then you'll be alright.
var polygons = new Array();
for (var i = 0; i < whatever; i++) {
polygon[i] = new Polygon(stuff);
event.addListener(polygon[i], moreStuff);
}
Similar to you: I'm using KML polygons as highlighting layers above my marker layers; I used this code to disable the onclick (so my marker areas will click, but not the polygon layer). HTH
function createLayers() {
var layerRest = new google.maps.KmlLayer('earth.kml', {preserveViewport:true, clickable: false});
layerRest.setMap(map);
polylayers.push(layerRest); // Layer # 0
}
加载中,请稍侯......
精彩评论