javascript - 将 javascript 变量添加到 addDomListener

Question

我正在尝试将 javascript 变量传递给 addDomListener 以触发 googlemaps 函数。

如果我写:

    var name=a1;

    google.maps.event.addDomListener(name, 'mouseover', function() {

有效。

但是如果我写:

    var i=1;
    var name="a"+i;
    google.maps.event.addDomListener(name, 'mouseover', function() {

它不起作用。 但是:

    alert(name)

给我

    a1

在这两种情况下。

我不知道是什么问题!

如有任何帮助，我们将不胜感激。

编辑

好的，更多细节:

我正在生成多个 div 名称，每个名称对应一个不同的事件。 这是 HTML/PHP:

    <?php
    $i=0;
    foreach ($key as $name)
    {  ?>

    <div class="row">
     <ul class="event-list">
       <li >
           <img "src="images/image.jpg" />
             <div  id="a<?=$i?>" style="min-height: 120px;min-width: 120px;" class="info">
             <h2 class="title"><?= $name ?></h2>
        </li>
      </ul>
    </div>
  <?php $i++; } ?>

例如我有 div:a0、a1、a2、a3、a4、a5

将鼠标悬停在这些 div 上必须修改 google-maps 上相关标记的图标颜色。 这是脚本:

<script type="text/javascript">


    function load() {
      var map = new google.maps.Map(document.getElementById("map"), {
        center: new google.maps.LatLng(<?= json_encode($lat); ?>, <?= json_encode($lng);?>),
        zoom: <?php echo json_encode(13); ?>,
        mapTypeId: 'roadmap'
      });
      var infoWindow = new google.maps.InfoWindow;



      // Change this depending on the name of your PHP file
      downloadUrl("map_controller.php", function(data) {
        var xml = data.responseXML;
        var markers = xml.documentElement.getElementsByTagName("marker");
        for (var i = 0; i < markers.length; i++) {
          var name = markers[i].getAttribute("name");
          var address = markers[i].getAttribute("address");
          //var type = markers[i].getAttribute("type");
          var point = new google.maps.LatLng(
              parseFloat(markers[i].getAttribute("lat")),
              parseFloat(markers[i].getAttribute("lng")));
          var html = "<b>" + name + "</b> <br/>" + address;
          var image = 'http://labs.google.com/ridefinder/images/mm_20_blue.png';
          


          var marker = new google.maps.Marker({
            map: map,
            position: point,
            icon: image


          });
        
          hover(marker,i);
   
          bindInfoWindow(marker, map, infoWindow, html);
          
        }
      });
    }

    function bindInfoWindow(marker, map, infoWindow, html) {
      google.maps.event.addListener(marker, 'click', function() {
        infoWindow.setContent(html);
        infoWindow.open(map, marker);
        
      });
    }

     
    function hover(marker,i){
    
	var name=a0; //ok
	//var name="a"+i; //doesnt work in addDomListener
    alert(name);
    
	google.maps.event.addDomListener(name, 'mouseover', function() {
    marker.setIcon('http://labs.google.com/ridefinder/images/mm_20_red.png');
	return i;
    
	});
   }
  

    function downloadUrl(url, callback) {
      var request = window.ActiveXObject ?
          new ActiveXObject('Microsoft.XMLHTTP') :
          new XMLHttpRequest;

      request.onreadystatechange = function() {
        if (request.readyState == 4) {
          request.onreadystatechange = doNothing;
          callback(request, request.status);
        }
      };

      request.open('GET', url, true);
      request.send(null);
    }


</script>

Answer 1

也许这与问题的真正含义相去甚远，但我还是会试一试:您不能将 DomListeners 附加到字符串，您可以将监听器附加到实例(如 map )或 DOM 元素引用。

如果你有一个标记，你可以用各种变量丰富那个标记:

var marker = new google.maps.Marker({
   position : new google.maps.LatLng(56.05, 10.4),
   map : map,
   someVariable : 'hello' 
});

然后在事件发生时检索这些变量:

google.maps.event.addDomListener(marker, 'mouseover', function() {
   alert(this.someVariable)
});

一个小演示 -> http://jsfiddle.net/zvfqd04q/

---

更新。如上所述，您不能将处理程序附加到字符串。在更新的问题中看到您的代码后，我可以看到您不需要谷歌地图 addDomListener任何一个。只需附上 native onmouseover a+n <div> 的事件处理程序(或类似的)元素。

带有一些 <div> 的示例的和修改后的 hover()功能。每个<div>绑定(bind)到 marker如果将鼠标悬停在相应的 <div> 上，则会更改哪个图标或将鼠标移离 <div> :

function hover(marker, i){
    document.getElementById('a'+i).onmouseover = function() {
       marker.setIcon('http://labs.google.com/ridefinder/images/mm_20_red.png');
    }
    document.getElementById('a'+i).onmouseleave = function() {
       marker.setIcon('http://labs.google.com/ridefinder/images/mm_20_blue.png');
    }
}

如您的代码所示:

var marker = new google.maps.Marker({
   map: map,
   position: point,
   icon: image
});
hover(marker,i);

演示 -> http://jsfiddle.net/qz5ggzry/