Question

我在多个多边形上有一个鼠标悬停功能但是当我鼠标悬停在我首先添加的pylogon时，事件监听器总是使用最新添加的多边形。

这是我的代码：

在Jons建议之后编辑。 Google地图似乎与此代码挂起......

<!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, 13.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>

Answer 1

您必须将每个多边形存储在一个数组中，然后为该数组的每个元素添加事件侦听器。否则，您将重写最新多边形的事件侦听器。我必须在我的应用程序中使用一堆标记执行相同的操作。这对于记忆消耗来说是不幸的，但只要你不处理数百个多边形，那么你就没事了。

var polygons = new Array();

for (var i = 0; i < whatever; i++) {
    polygon[i] = new Polygon(stuff);
    event.addListener(polygon[i], moreStuff);
}

Answer 2

与您类似：我使用KML多边形作为突出显示标记图层上方的图层;我使用此代码禁用onclick（因此我的标记区域将单击，但不是多边形图层）。 HTH

function createLayers() {
var layerRest = new google.maps.KmlLayer('earth.kml', {preserveViewport:true, clickable: false});
layerRest.setMap(map);


polylayers.push(layerRest); // Layer # 0        
}

Google地图：事件侦听器仅查找最新添加的对象

2 个答案: