Bing Maps v8 - 在图钉上调用点击事件
Bing Maps v8 - Invoke Click Event on PushPin
一旦我加载 Bing 带有多个图钉和信息框的地图。我在 HTML 上添加了带有特定图钉索引的单击此处锚标记,以在 javascript 单击事件上显示信息框。不知何故,它对我不起作用。
我确实看到 Invoke 事件在 v8
中得到支持
这里是fiddlehttps://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>
问题是您在调用事件时没有传入任何事件参数。因此,事件处理程序不会通过您的 if 语句,因此不会执行任何操作。请参阅此处的文档,您会注意到您需要提供事件参数:https://msdn.microsoft.com/en-us/library/mt750279.aspx
也就是说,我不喜欢您的应用在此处采用的方法。如果您只是想让它快速简单地工作,请将您的调用代码行替换为:
pushpinClicked({e:{target: selectedPin }});
我强烈建议将图钉添加到图层并将点击事件添加到图层。这极大地降低了事件系统的复杂性并且有一个小的性能提升。
一旦我加载 Bing 带有多个图钉和信息框的地图。我在 HTML 上添加了带有特定图钉索引的单击此处锚标记,以在 javascript 单击事件上显示信息框。不知何故,它对我不起作用。
我确实看到 Invoke 事件在 v8
中得到支持这里是fiddlehttps://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>
问题是您在调用事件时没有传入任何事件参数。因此,事件处理程序不会通过您的 if 语句,因此不会执行任何操作。请参阅此处的文档,您会注意到您需要提供事件参数:https://msdn.microsoft.com/en-us/library/mt750279.aspx
也就是说,我不喜欢您的应用在此处采用的方法。如果您只是想让它快速简单地工作,请将您的调用代码行替换为:
pushpinClicked({e:{target: selectedPin }});
我强烈建议将图钉添加到图层并将点击事件添加到图层。这极大地降低了事件系统的复杂性并且有一个小的性能提升。