將地圖信息框懸停在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 
    }); 
    } 
}