Google Maps:事件监听器只查找最近添加的对象

Google Maps: Event listener finds only the latest added object

本文关键字：最近 添加 对象 查找 Maps 事件 监听器 Google      更新时间：2023-09-26

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

下面是我的代码:

根据jones的建议编辑。谷歌地图似乎挂在这个代码…

<!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>

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

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

与您相似:我使用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        
}
相关文章：