Question

我正在将bing map集成到应用程序中。在输入邮政编码信息后单击搜索按钮时，下面的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

在you sideTabHoverEnt函数中，假设e是用户与之交互的图钉，但这不是您传入的内容。您传入的是字符串（索引为字符串）。尝试执行以下操作：

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

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

1 个答案: