Question

我正在使用Google Maps API，我正在尝试运行一个网站，该网站会在您点击时显示有关特定位置的信息。信息div底部的可点击按钮很少，用于根据点击的按钮更改显示的信息。

http://i61.tinypic.com/vxge4o.jpg - ＆gt;示例

这些按钮仅在点击地图上的位置后显示，因此我的addEventListener显示为错误＆＃34;无法调用方法＆＃39; addEventListener＆＃39; of null＆＃34 ;;我假设发生这种情况是因为该方法正在寻找一个尚未存在的按钮。

有没有办法让addEventListener方法仅在地图上选择了某个位置后才能工作？

以下是我目前拥有的Javascript代码：

function change() {
  var within = document.getElementById("information").innerhtml;
  within = "<p>hi</p>";
}

function recreate(){
  var alter = document.getElementById("2");
  alter.addEventListener('click', function(event) {
    change();
  });
}

以下是与之对应的HTML代码段：

 <div id="information">
    <p>Location</p>
    <div id="details">
        <p>Candidate Type:</p>
        <p>Candidate Name:</p>
        <p>Location Name:</p>
        <p>PeopleSoft Location Code:</p>
        <p>Street Address:</p>
        <p>City:</p>
        <p>County:</p>
        <p>State:</p>
        <p>Zipcode:</p>
        <p>Latitude:</p>
        <p>Longitude:</p>
        <p>From 2C Survey?</p>
    </div>
    <center>
        <input type="image" src="*image source*" id="1"/>
        <input type="image" src="*image source*" id="2"/>
        <input type="image" src="*image source*" id="3"/>
        <input type="image" src="*image source*" id="4"/>
        <input type="image" src="*image source*" id="5"/>
        <input type="image" src="*image source*" id="6"/>
        </center>
    <div id="back"><center>
        <input type="image" src="*image source*"/>
    </center></div>
</div>

我已经尝试过这些页面上的解决方案而无济于事。

https://stackoverflow.com/a/9856159/3838411

Attach a body onload event with JS

当我尝试使用window.onload选项时，我的地图会中断，只显示一个灰色框。我也尝试将它放在html文件的脚本标签中，但这也不起作用。

我确信有一种方法可以做到这一点，但我对JavaScript很陌生，所以我可能在这里错过了一些想法。任何帮助都会很棒！

修改

我知道这可能不是最简单的，但由于我现在正在学习JavaScript，我想在纯JavaScript中得到一个答案，虽然我知道jQuery可能会更简单。再次感谢！

第二次修改

我的原始信息div已在HTML文件中创建。我用CSS来隐藏它

#information{
display: none;
}

然后使用：

google.maps.event.addListener(marker, 'click', function(){
    map.setZoom(16);
    map.setCenter(marker.getPosition());
    document.getElementById("information").style.display="block";
});

在点击点时显示

Answer 1

如果您可以重新使用元素而不是为每次使用创建新元素，您可以尝试这样的事情（粗略的例子，以便您的想法）： JSFiddle

//traverse the DOM to get to your center container
var thediv = document.getElementById("information");
var thecenter = thediv.getElementsByTagName("input");

//set up the event handler for all of the images with a loop
for (i = 0; i < thecenter.length; i++) { 
    thecenter[i].addEventListener("click", function(){ inputimageclicked(this) }, false);
}

//function to handle all image clicks
//as you can see, you can access the object that fired the 
//click event and use it to vary the effect of the function
//you can access any attribute, style, etc of the target object
function inputimageclicked(obj) { 
   alert("input image with id: " + obj.id); 
   //this is where you will determine what <input> fire the event 
   //and react as you need to (call another function, show/hide 
   //something, etc.
}

*如果您需要支持那些旧浏览器

，则需要处理旧的IE attachEvent替代方案

Answer 2

我实际上使用了@epipav的建议，即在显示元素后发生事件。它最终看起来像这样。

google.maps.event.addListener(marker, 'click', function(){
    *actions that are put into place*

    var myBtn = document.getElementById("2");
    myBtn.addEventListener('click', function(event) {
      change1();
    }, false);
    function change1(){ 
      *some function*
    };
}, false);

我不确定是否应该编辑我以前的帖子或创建答案，因为这是我使用的解决方案。我也不确定是否应该删除这个问题，因为它可能在将来帮助其他人。

如何在页面加载时未立即显示的元素中添加事件侦听器？

2 个答案: