将焦点设置在google地图's InfoWindow上，将鼠标移到上面

Set focus on google map's InfoWindow on marker mouseover

本文关键字：InfoWindow 鼠标 到上面 设置 焦点 google 地图      更新时间：2023-09-26

我想将信息窗口聚焦在鼠标悬停在标记上。只要他停留在信息窗口，窗口就会打开。下面是我的代码

content="<div class='info_content' id='info"+obj.customer_id+"'><span>"+j+".</span><h1><a href='<?php echo Mage::getUrl() ?>"+obj.identifier+"<?php echo $suffix; ?>'>"+obj.company.substr(0, 28)+"</a> </h1><br /><p>"+address+"</p><p>"+Math.round(obj.distance)+" Km Away</p><br /><button type='button' value='Get Direction' class='button_input' onclick='closeInfoWindow(),calcRoute("+obj.latitude+","+obj.longitude+")' name='Get Direction'>Get Direction</button></div>";
        marker = new google.maps.Marker({
            position: position,
            map: map,
            title: obj.company,
            icon:icon,
        });
        if(i==0)
        { 
        map.setCenter(marker.getPosition())
        }
        google.maps.event.addListener(marker,'mouseover', (function(marker,content,infowindow){ 
          return function() {
              infowindow.close();
              infowindow.setContent(content);
              infowindow.open(map,marker);
              jQuery("#info"+obj.customer_id).focus();
          };
          })(marker,content,infowindow)); 
        google.maps.event.addListener(marker,'mouseout',  (function(marker,content,infowindow){ 
           return function() {


          };
          })(marker,content,infowindow));

除非您设置tabindex属性(如果我没有错，您可以使用此属性关注任何元素)，否则不可能对div元素进行关注。focus动作通常用于表单/文本元素。

我做了一个工作示例(参见jsFiddle):

window.onload = function(){
    var map = new google.maps.Map(document.getElementById('map'), { 
        center: new google.maps.LatLng(22.669, 77.709),
        zoom: 5,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });
    var content="<div class='info_content' id='info01' tabindex='1'>hello world</div>";
    var infowindow = new google.maps.InfoWindow();
    var marker = new google.maps.Marker({
        position: new google.maps.LatLng(22.669, 77.709),
        map: map
    });
    google.maps.event.addListener(marker, 'mouseover', function(){
        infowindow.setContent(content);
        infowindow.open(map, marker);
    });
    google.maps.event.addListener(marker, 'mouseout', function(){
        //
    });
    google.maps.event.addListener(infowindow, 'domready', function(){
        $('#info01').focus();
    });
};
相关文章：