빙에지도 정보가 표시되지 않는 빙빙 위에 infobox가 있습니다.

Question

빙지도를 응용 프로그램에 통합하는 작업을하고 있습니다. 우편 번호 정보를 입력 한 후 검색 버튼을 클릭하면 아래의 div에 사용 가능한 상점 목록과 압정이 표시된지도가 표시됩니다. 인포 박스를 표시하면 고정 핀 위로 마우스를 가져 가면 작동합니다. 그러나 필자의 요구 사항은 사용자가지도의 왼쪽에있는 목록 위로 마우스를 가져 가면 특정 infobox를 사용자에게 보여줘야한다는 것입니다. I 왼쪽에 제 결과 가리키면

여기서 예를 들어, 해당 정보 상자는지도에 표시한다. 왜 작동하지 않는지 알 수 없습니다. 미리 도움을 청합니다. 고맙습니다. 지금까지 시도한 것을 찾으십시오.

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 
    }); 
    } 
}