Bing Maps v8 - 在PushPin上调用Click事件

时间:2017-06-07 21:18:04

标签: javascript bing-maps

一旦我用带有信息框的多个图钉加载Bing地图。我已经在HTML上添加了click here锚标记,并使用特定的图钉索引在javascript点击事件上显示信息框。不知怎的,它不适合我。

我确实在v8中支持 Invoke 事件

这是小提琴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");
}
&#13;
    <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>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:0)

问题是您在调用事件时没有传递任何事件参数。因此,事件处理程序没有通过你的if语句,因此没有做任何事情。请参阅此处的文档,您会发现需要提供事件参数:https://msdn.microsoft.com/en-us/library/mt750279.aspx

那就是说,我不喜欢你的应用程序在这里采用的方法。如果您只是想让这个工作变得简单,请用以下代码替换您的调用代码行:

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

我强烈建议您将图钉添加到图层并将点击事件添加到图层。这大大降低了事件系统的复杂性,并且性能很小。