javascript - 由 javascript 为 Google map 图例创建的 html 元素的事件监听器不起作用

Question

我正在尝试使用 Javascript 将事件监听器添加到通过 Javascript 创建的多个链接。我认为我可能在创建它之前调用它，但在这里查看了一些其他示例(例如 add event listener on elements created dynamically 和 Google Map Event Listener does not seem to work )，并认为如果这些工作正常，我也应该没问题。如果有人能指出我哪里出错了，我将不胜感激。

*似乎每个人都可以更轻松地将整个片段放入其中。

此外，截至目前，当我 console.log("P1 "+ precinct1

时，我得到“P1 [object HTMLParagraphElement]”

JS 代码片段:

    function initialize() {

  var myOptions = {
    zoom: 10,
    center: new google.maps.LatLng(123, 123),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }

/*
Creating Map - Do not create with Fusion Tables directly so that you have control
of how the polygons are drawn.
*/
map = new google.maps.Map(document.getElementById('map-canvas'), myOptions);

  //Initialize JSONP request

  var script = document.createElement('script');
  var url = ['https://www.googleapis.com/fusiontables/v1/query?'];
  url.push('sql=');
  var query = 'SELECT COMMISH, geometry, Website FROM ' + tableId;
  var encodedQuery = encodeURIComponent(query);
  url.push(encodedQuery);
  url.push('&callback=drawMap');
  url.push('&key=' + key);
  script.src = url.join('');
  var body = document.getElementsByTagName('body')[0];
  body.appendChild(script);
}

  function createPolygon(precinct, url, comPrecinct){
    google.maps.event.addListener(precinct, 'mouseover', function() {
      this.setOptions(
        {
          fillOpacity: 0.5,
          strokeOpacity: 1,
        }
      );

    });

    google.maps.event.addListener(precinct, 'mouseout', function() {
      this.setOptions(
        {
          fillOpacity: 0.3,
          strokeOpacity: 0,
        }
      );
    });

    google.maps.event.addListener(precinct, 'click', function(){
      window.location = url;
    });

  }

  function drawMap(data) {
        var rows = data['rows'];
        console.log(rows);
        /*Create Legend*/
        var legend = document.createElement('div');
        legend.id = 'legend';
        var content = [];
        content.push('<a href="#"><p class="precinct" id="precinct1"></div>Precinct 1</p></a>');
        content.push('<a href="#"><p class="precinct" id="precinct2"></div>Precinct 2</p></a>');
        content.push('<a href="#"><p class="precinct" id="precinct3"></div>Precinct 3</p></a>');
        content.push('<a href="#"><p class="precinct" id="precinct4"></div>Precinct 4</p></a>');

       legend.innerHTML = content.join('');
       legend.index = 1;
       map.controls[google.maps.ControlPosition.RIGHT_TOP].push(legend);

        for (var i in rows) {
            var comPrecinct = rows[i][0];
            var url = rows[i][2];
            var newCoordinates = [];
            var geometries = rows[i][1]['geometries'];

            if (geometries) {
              for (var j in geometries) {
                newCoordinates.push(constructNewCoordinates(geometries[j]));
              }
            } else {
              newCoordinates = constructNewCoordinates(rows[i][1]['geometry']);
            }

            /*
              Colors are out of order because precincts are out of order
              in KML files. Adjust CSS as necessary.
            */
            var precinct = new google.maps.Polygon({
              paths: newCoordinates,
              strokeColor: colors[i],
              strokeOpacity: 0,
              strokeWeight: 1,
              fillColor: colors[i],
              fillOpacity: 0.3,
            });


            createPolygon(precinct, url, comPrecinct);

            precinct.setMap(map);

        }

      console.log('P1 ' + precinct1);
      google.maps.event.addListener(legend, 'hover', function(e){
          if(e.target.id === 'precinct1'){
            console.log("P1 - aawwwww yis");
          }
        });

  }

  function constructNewCoordinates(polygon){
    var newCoordinates = [];
    var coordinates = polygon['coordinates'][0];
    for (var i in coordinates){
      newCoordinates.push(new google.maps.LatLng(coordinates[i][1], coordinates[i][0]));
    }
    return newCoordinates;
  }

google.maps.event.addDomListener(window, 'load', initialize);

P].push(legend);

Answer 1

问题是(正如您所指出的)您在创建它之前就使用了它。选项:

1. 创建它(并实际将其添加到文档中)，然后缓存它，然后调用它。
2. 不要缓存它(建议不要这样做)
3. 从添加它们的容器中进行委托(delegate)(首选)

我没有使用过 Google Maps API，但类似的东西可能会起作用(假设它捕获相同的鼠标事件:

google.maps.event.addListener(precinctContainer, 'hover', function(e){
    if(e.target.id === 'precinct1'){
        console.log("Aww yis");
    }
});

哪里precinctContainer是你放置所有这些<a>的容器content 中的标签数组。