javascript Bing 地图 - 在 PushPin 上调用点击事件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11148042/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
提示：将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间：2020-10-26 12:12:02 来源:igfitidea点击:
Bing Maps - Invoke Click Event on PushPin
提问by HeavenCore
I have the following bing map: https://www.bob-elliot.co.uk/locateV2.php
我有以下 bing 地图：https: //www.bob-elliot.co.uk/locateV2.php
When a shop is selected in the left-hand list the map auto centers on that pushpin, what i need to do now is invoke the click() handle of that pin (or show the relevant InfoBox).
当在左侧列表中选择一家商店时，地图自动以该图钉为中心，我现在需要做的是调用该图钉的 click() 句柄（或显示相关的信息框）。
Problem is, i'm pushing the pins into a Microsoft.Maps.EntityCollection();called dataLayerso i cant call map.entities.get() directly - or rather - if i try calling it this way get() does not return anything.
问题是，我正在将引脚推入一个Microsoft.Maps.EntityCollection();被调用的对象中，dataLayer所以我不能直接调用 map.entities.get() - 或者更确切地说 - 如果我尝试以这种方式调用它 get() 不返回任何内容。
Note the zoomMap()function at the bottom of this snippet, i have commented out the lines in question.
注意zoomMap()这个片段底部的函数，我已经注释掉了有问题的行。
How can i invoke the click event?
我如何调用点击事件？
var map = null;
var dataLayer = null;
var infoboxLayer = null;
function loadMap() {
//#### Prep default location
var defaultLocation = new Microsoft.Maps.Location(53.6880, -2.6646);
//#### Prep Map Options
var mapOptions = {
credentials: 'KEY_REMOVED',
center: defaultLocation,
mapTypeId: Microsoft.Maps.MapTypeId.road,
zoom: 7,
enableClickableLogo: false,
enableSearchLogo: false
}
//#### Initialise the primary map control
map = new Microsoft.Maps.Map(document.getElementById('BobElliotMap'), mapOptions);
//#### Add data layer
dataLayer = new Microsoft.Maps.EntityCollection();
map.entities.push(dataLayer);
//#### Add infobox layer
infoboxLayer = new Microsoft.Maps.EntityCollection();
map.entities.push(infoboxLayer);
//#### Prep InfoBox & add to infobox layer
var infoboxOptions = {
width: 300,
height: 200,
visible: false,
offset: new Microsoft.Maps.Point(0, 20)
};
infobox = new Microsoft.Maps.Infobox(new Microsoft.Maps.Location(0, 0), infoboxOptions);
infoboxLayer.push(infobox);
//#### Add Data to the map
DrawPins();
}
function displayInfobox(e) {
if (e.targetType == "pushpin") {
infobox.setOptions({
title: e.target.Title,
description: e.target.Description,
visible: true,
offset: new Microsoft.Maps.Point(0, 25)
});
infobox.setLocation(e.target.getLocation());
//#### A buffer limit to use to specify the infobox must be away from the edges of the map.
var buffer = 30;
var infoboxOffset = infobox.getOffset();
var infoboxAnchor = infobox.getAnchor();
var infoboxLocation = map.tryLocationToPixel(e.target.getLocation(), Microsoft.Maps.PixelReference.control);
var dx = infoboxLocation.x + infoboxOffset.x - infoboxAnchor.x;
var dy = infoboxLocation.y - 25 - infoboxAnchor.y;
if (dy < buffer) { //Infobox overlaps with top of map.
//#### Offset in opposite direction.
dy *= -1;
//#### add buffer from the top edge of the map.
dy += buffer;
} else {
//#### If dy is greater than zero than it does not overlap.
dy = 0;
}
if (dx < buffer) { //Check to see if overlapping with left side of map.
//#### Offset in opposite direction.
dx *= -1;
//#### add a buffer from the left edge of the map.
dx += buffer;
} else { //Check to see if overlapping with right side of map.
dx = map.getWidth() - infoboxLocation.x + infoboxAnchor.x - infobox.getWidth();
//#### If dx is greater than zero then it does not overlap.
if (dx > buffer) {
dx = 0;
} else {
//#### add a buffer from the right edge of the map.
dx -= buffer;
}
}
//#### Adjust the map so infobox is in view
if (dx != 0 || dy != 0) {
map.setView({
centerOffset: new Microsoft.Maps.Point(dx, dy),
center: map.getCenter()
});
}
}
}
function DrawPins() {
var pin0 = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(53.1913, -2.51945));
pin0.Title = "** CYCLONE CYCLES A/C CLOSED";
pin0.Description = "74 WEAVER STREET<br />WINSFORD<br />CHESHIRE<br />CW7 4AA<br /><br /><b>Tel:</b> +44606861992";
Microsoft.Maps.Events.addHandler(pin0, 'click', displayInfobox);
dataLayer.push(pin0);
var pin1 = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(53.7485, -0.348162));
pin1.Title = "**2 WHEELS CYCLES LIMITED - HULL";
pin1.Description = "8 SPRING STREET<br />HULL<br />HU2 8RB<br /><br /><b>Tel:</b> +44482216170<br /><b>Fax:</b> +44828515<br /><b>Web:</b> <a href='http://www.2wheelscycles.co.uk' targer='_blank'>www.2wheelscycles.co.uk</a>";
Microsoft.Maps.Events.addHandler(pin1, 'click', displayInfobox);
dataLayer.push(pin1);
}
function zoomMap(PinID, Lat, Long) {
var ZoomLocation = new Microsoft.Maps.Location(Lat, Long);
map.setView({
zoom: 13,
center: ZoomLocation
});
//#### These are the lines that dont work, selectedPin remains undefined
//var selectedPin = dataLayer.entities.get(PinID);
//Microsoft.Maps.Events.invoke(selectedPin, 'click', '');
}
采纳答案by Faisal Mq
Looks like for some reason e.target is not coming in displayInfobox function.
看起来由于某种原因 e.target 没有出现在 displayInfobox 函数中。
I have but modified your code a little bit at 2, 3 places to get something close to your intended point. Please check it below:
我只是在 2、3 个地方稍微修改了你的代码，以获得接近你预期点的东西。请在下面检查：
var map = null;
var dataLayer = null;
var infoboxLayer = null;
function loadMap() {
//Prep default location
var defaultLocation = new Microsoft.Maps.Location(53.6880, -2.6646);
//Prep Map Options
var mapOptions = {
//credentials: 'KEY_REMOVED',
center: defaultLocation,
mapTypeId: Microsoft.Maps.MapTypeId.road,
zoom: 7,
enableClickableLogo: false,
enableSearchLogo: false
}
//Initialise the primary map control
map = new Microsoft.Maps.Map(document.getElementById('BobElliotMap'), mapOptions);
//Add data layer
dataLayer = new Microsoft.Maps.EntityCollection();
map.entities.push(dataLayer);
// Add infobox layer
infoboxLayer = new Microsoft.Maps.EntityCollection();
map.entities.push(infoboxLayer);
//Prep InfoBox & add to infobox layer
var infoboxOptions = {
width: 300,
height: 200,
visible: false,
offset: new Microsoft.Maps.Point(0, 20)
};
infobox = new Microsoft.Maps.Infobox(new Microsoft.Maps.Location(0, 0), infoboxOptions);
infoboxLayer.push(infobox);
//Add Data to the map
DrawPins();
setTimeout(function() {
//Initial zoom for testing zoomMap function
var pushpin = dataLayer.get(0);
var indx = dataLayer.indexOf(pushpin);
zoomMap(indx, pushpin.getLocation().latitude, pushpin.getLocation().longitude);
},500);
}
function displayInfobox(e) {
if ( this.target.id && this.target.id.indexOf("pin") != -1 ) {
alert("click event fired on pushpin");
infobox.setOptions({
title: this.target.Title,
description: this.target.Description,
visible: true,
offset: new Microsoft.Maps.Point(0, 25)
});
infobox.setLocation(this.target.getLocation());
//A buffer limit to use to specify the infobox must be away from the edges of the map.
var buffer = 30;
var infoboxOffset = infobox.getOffset();
var infoboxAnchor = infobox.getAnchor();
var infoboxLocation = map.tryLocationToPixel(this.target.getLocation(), Microsoft.Maps.PixelReference.control);
var dx = infoboxLocation.x + infoboxOffset.x - infoboxAnchor.x;
var dy = infoboxLocation.y - 25 - infoboxAnchor.y;
if (dy < buffer) { //Infobox overlaps with top of map.
//#### Offset in opposite direction.
dy *= -1;
//#### add buffer from the top edge of the map.
dy += buffer;
} else {
//#### If dy is greater than zero than it does not overlap.
dy = 0;
}
if (dx < buffer) { //Check to see if overlapping with left side of map.
//#### Offset in opposite direction.
dx *= -1;
//#### add a buffer from the left edge of the map.
dx += buffer;
} else { //Check to see if overlapping with right side of map.
dx = map.getWidth() - infoboxLocation.x + infoboxAnchor.x - infobox.getWidth();
//#### If dx is greater than zero then it does not overlap.
if (dx > buffer) {
dx = 0;
} else {
//#### add a buffer from the right edge of the map.
dx -= buffer;
}
}
//#### Adjust the map so infobox is in view
if (dx != 0 || dy != 0) {
map.setView({
centerOffset: new Microsoft.Maps.Point(dx, dy),
center: map.getCenter()
});
}
}
}
function DrawPins() {
var pin0 = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(53.1913, -2.51945));
pin0.id = "pin_0";
pin0.Title = "** CYCLONE CYCLES A/C CLOSED";
pin0.Description = "74 WEAVER STREET<br />WINSFORD<br />CHESHIRE<br />CW7 4AA<br /><br /><b>Tel:</b> +44606861992";
Microsoft.Maps.Events.addHandler(pin0, 'click', displayInfobox);
dataLayer.push(pin0);
var pin1 = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(53.7485, -0.348162));
pin1.id = "pin_1";
pin1.Title = "**2 WHEELS CYCLES LIMITED - HULL";
pin1.Description = "8 SPRING STREET<br />HULL<br />HU2 8RB<br /><br /><b>Tel:</b> +44482216170<br /><b>Fax:</b> +44828515<br /><b>Web:</b> <a href='http://www.2wheelscycles.co.uk' targer='_blank'>www.2wheelscycles.co.uk</a>";
Microsoft.Maps.Events.addHandler(pin1, 'click', displayInfobox);
dataLayer.push(pin1);
}
function zoomMap(indx, Lat, Long) {
var ZoomLocation = new Microsoft.Maps.Location(Lat, Long);
map.setView({
zoom: 13,
center: ZoomLocation
});
//#### These are the lines that dont work, selectedPin remains undefined
//var selectedPin = dataLayer.entities.get(PinID);
//Microsoft.Maps.Events.invoke(selectedPin, 'click', '');
var selectedPin = dataLayer.get(indx);
Microsoft.Maps.Events.invoke(selectedPin, 'click');
}
