javascript - Bing map v8 - 在 PushPin 上调用点击事件

Question

一旦我加载带有多个图钉和信息框的 Bing map 。我在 HTML 上添加了单击此处 anchor 标记，并带有特定的图钉索引，以在 javascript 单击事件上显示信息框。不知怎的，它对我不起作用。

我确实看到 Invoke v8 支持事件

这是 fiddle https://jsfiddle.net/pakpatel/9dc4oxfk/2/

var map, infobox;
  map = new Microsoft.Maps.Map('#myMap', {
    credentials: ''
  });

  //Create an infobox at the center of the map but don't show it.
  infobox = new Microsoft.Maps.Infobox(map.getCenter(), {
    visible: false
  });

  //Assign the infobox to a map instance.
  infobox.setMap(map);

  //Create random locations in the map bounds.
  var randomLocations = Microsoft.Maps.TestDataGenerator.getLocations(5, map.getBounds());

  for (var i = 0; i < randomLocations.length; i++) {
    var pin = new Microsoft.Maps.Pushpin(randomLocations[i]);

    //Store some metadata with the pushpin.
    pin.metadata = {
      title: 'Pin ' + i,
      description: 'Discription for pin' + i
    };

    //Add a click event handler to the pushpin.
    Microsoft.Maps.Events.addHandler(pin, 'click', pushpinClicked);

    //Add pushpin to the map.
    map.entities.push(pin);
  }


function pushpinClicked(e) {
  //Make sure the infobox has metadata to display.
  if (e.target.metadata) {
    //Set the infobox options with the metadata of the pushpin.
    infobox.setOptions({
      location: e.target.getLocation(),
      title: e.target.metadata.title,
      description: e.target.metadata.description,
      visible: true
    });
  }
}

function showInfoboxByKey(Key) {

  //Look up the  pushpin by gridKey.
  var selectedPin = map.entities.get(gridKey);
  //Show an infobox for the cluster or pushpin.
  Microsoft.Maps.Events.invoke(selectedPin, "click");
}

    <script type='text/javascript'
        src='http://www.bing.com/api/maps/mapcontrol?callback=GetMap'
        async defer></script>
 <div id="myMap" style="position:relative;width:600px;height:400px;"></div>
 <a href='javascript:void(0);' onclick='showInfoboxByKey(3);'> Click Here </a>

Answer 1

问题是您在调用事件时没有传入任何事件参数。因此，事件处理程序不会越过您的 if 语句，因此不会执行任何操作。请参阅此处的文档，您会注意到您需要提供事件参数:https://msdn.microsoft.com/en-us/library/mt750279.aspx

也就是说，我不喜欢您的应用程序中采用的方法。如果您只是想让这个工作快速简单，请将您的调用代码行替换为:

pushpinClicked({e:{target: selectedPin }});

我强烈建议将图钉添加到图层并将单击事件添加到图层。这大大降低了事件系统的复杂度，并且性能夸夸其谈很小。