将地图信息框悬停在li上不显示

Question

我正在将bing地图整合到应用程序中。在输入邮政编码信息后单击搜索按钮时，下面的div将显示可用商店列表和带有图钉的地图。当我将鼠标悬停在图钉上时，显示信息框正在工作。但我的要求是，当用户悬停在地图左侧的列表中时，我必须向用户显示特定的信息框。

例如在这里，当我将鼠标悬停在左边的第一个结果，相应的信息框应显示在地图上。我无法弄清楚它为什么不起作用。提前感谢您的帮助。谢谢。请在下面找到我到目前为止所尝试的内容。当列表悬停

for (var i = 0; i < data.length; i++) { 

     if (storeLoc && (data[i].metadata.LocationTypeSort == "ja")) { 
     console.log(counter); 
     console.log(data); 

     innerTablecontent += "<tr><td><h4 class='h4-mapDetails-storeName'>" + '<div style="display: inline-block; vertical-align: middle"><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25"><circle cx="12.5" cy="12.5" r="12.5"/><text x="50%" y="17" text-anchor="middle" fill="white" font-size="14" font-weight="bold">' + (+counter) + '</text></svg></div>' + 
      " " + "<b><span style='margin-top:-20px;display:block;margin-left:45px;'>" + data[i].metadata.LocationName + "</span></b>" + "</h4><p class='p-mapDetails'>" + data[i].metadata.AddressLine + "," + data[i].metadata.Locality + "," + data[i].metadata.AdminDistrict + " " + data[i].metadata.PostalCode + "</p>" 
      + "<p class='p-mapDetails'>" + data[i].metadata.Phone + "<span><span class='index hidden'>" + i + "</span> | " + '<a style=" font-family:Helvetica Neue LT Pro Roman,sans-serif;color:#00A7CE" href="">View details</a>' + "</span></p>"+ "<span class='miles-mapDetails'>" +(data[i].metadata.__Distance* 0.6214).toFixed(2)+"mi</span></td></tr>" 
     locations.push(data[i].getLocation()); 

     var pin1 = createCirclePushpin(data[i].getLocation(), 12.5, 'rgb(0, 0, 0)', 'black', 1, counter); 
     pin1.metadata = { 
      //title: counter + "." + " " + data[i].metadata.LocationName, 
      title: " ", 
      description: '<div style="display: inline-block; vertical-align: middle; margin-right:10px;"><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25"><circle cx="12.5" cy="12.5" r="12.5"/><text font-weight="bold" x="50%" y="17" text-anchor="middle" fill="white" font-size="14">' + (+counter) + '</text></svg></div>' + "<span class='h4-mapDetails-storeName'>" + data[i].metadata.LocationName + "</span><p style='margin-bottom:-3px;font-family:Helvetica Neue LT Pro Roman,Helvetica,sans-serif;font-style:normal !important;color:#000;font-size:14px;'>" + data[i].metadata.AddressLine + ", " + data[i].metadata.Locality + "," + data[i].metadata.AdminDistrict + " " + 
      data[i].metadata.PostalCode + "<br>" + data[i].metadata.Phone + "</p>" + "<a>" + '<a style="font-size:14px;font-family:Helvetica Neue LT Pro Roman,Helvetica,sans-serif;color:#00A7CE" href="">View details</a>' + "</a>" 
     }; 


     Microsoft.Maps.Events.addHandler(pin1, 'mouseover', pushpinClicked); 
     map.entities.push(pin1); 
     counter++; 
     } 

功能调用。

$("#mapDetails").on("mouseover", "table td", function() { 
     sideTabHoverEvent(hoverdata[$(this)[0].getElementsByClassName('index')[0].innerText]); 
    }) 
function sideTabHoverEvent(e) { 
    if (e) { 
    //Set the infobox options with the metadata of the pushpin. 
    infobox.setOptions({ 
     location: e.getLocation(), 
     //title: e.metadata.title, 
     description: e.metadata.description, 
     visible: true 
    }); 
    } 
} 

Answer 1

在你假定你是ËsideTabHoverEnt功能是将用户与交互的图钉，但这不是要传递什么你是传递一个字符串（索引作为一个字符串）。请尝试执行以下操作：

function sideTabHoverEvent(e) { 
    if (e) { 
    //Turn the index string value into a number. 
    var idx = parseInt(e); 
    var shape = map.entities.get(idx); 

    //Set the infobox options with the metadata of the pushpin. 
    infobox.setOptions({ 
     location: shape.getLocation(), 
     //title: shape.metadata.title, 
     description: shape.metadata.description, 
     visible: true 
    }); 
    } 
}