在Bing Map的画布图钉上设置事件

Question

我在由画布创建的图钉上设置事件时遇到一个问题。要设置环境，请转到Bing Map - Pushpin Event Example。并在Javascript选项卡中复制以下代码并运行示例。

var map = new Microsoft.Maps.Map(document.getElementById('myMap'), {});
var pushpin = new Microsoft.Maps.Pushpin(map.getCenter(), {
    icon: createRedArrow(110),
    anchor: new Microsoft.Maps.Point(12, 12)
});
map.entities.push(pushpin);
function createRedArrow(heading) {
    var c = document.createElement('canvas');
    c.width = 24;
    c.height = 24;
    var ctx = c.getContext('2d');
    // Offset the canvas such that we will rotate around the center of our arrow
    ctx.translate(c.width * 0.5, c.height * 0.5);
    // Rotate the canvas by the desired heading
    ctx.rotate(heading * Math.PI / 180);
    //Return the canvas offset back to it's original position
    ctx.translate(-c.width * 0.5, -c.height * 0.5);
    ctx.fillStyle = '#f00';
    // Draw a path in the shape of an arrow.
    ctx.beginPath();
    ctx.moveTo(12, 0);
    ctx.lineTo(5, 20);
    ctx.lineTo(12, 15);
    ctx.lineTo(19, 20);
    ctx.lineTo(12, 0);
    ctx.closePath();
    ctx.fill();
    ctx.stroke();
    // Generate the base64 image URL from the canvas.
    return c.toDataURL();
}

// Binding the events
Microsoft.Maps.Events.addHandler(pushpin, 'click', function () { highlight('pushpinClick'); });
Microsoft.Maps.Events.addHandler(pushpin, 'dblclick', function () { highlight('pushpinDblclick'); });
Microsoft.Maps.Events.addHandler(pushpin, 'mousedown', function () { highlight('pushpinMousedown'); });
Microsoft.Maps.Events.addHandler(pushpin, 'mouseout', function () { highlight('pushpinMouseout'); });
Microsoft.Maps.Events.addHandler(pushpin, 'mouseover', function () { highlight('pushpinMouseover'); });
Microsoft.Maps.Events.addHandler(pushpin, 'mouseup', function () { highlight('pushpinMouseup'); });
// Setting up the printout panel
document.getElementById('printoutPanel').innerHTML =
    '<div id="pushpinClick">click</div><div id="pushpinDblclick">dblclick</div><div id="pushpinMousedown">mousedown</div><div id="pushpinMouseout">mouseout</div><div id="pushpinMouseover">mouseover</div><div id="pushpinMouseup">mouseup</div>';
function highlight(id) {
    document.getElementById(id).style.background = 'LightGreen';
    setTimeout(function () { document.getElementById(id).style.background = 'white'; }, 1000);
}

您会注意到所有图钉事件都在画布的宽度/高度（24/24）区域上起作用，如下图所示

并且根据我的要求，事件仅应在画布的绘制部分上起作用，并且带w / h的画布应为100。那么，我该如何实现？

此外，如果两个或更多个图钉距离更近（请参见下图），并且如果两个画布都相互重叠，那么我们如何识别图钉事件中两个图钉是否不同？

[这里，我已将Bing Map的现有示例提供给我。但是这里是actual pushpin secnario。

Answer 1

[不幸的是，这是在Bing Maps中渲染图钉的方式的限制。有一个选项可以将单击区域修改为圆形而不是正方形，这将对您有所帮助。请参见roundClickableArea图钉选项：https://docs.microsoft.com/en-us/bingmaps/v8-web-control/map-control-api/pushpinoptions-object