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

在画布创建的图钉上设置事件时，我面临一个问题。要设置环境，请转到。在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);
}

var-map=new Microsoft.Maps.map（document.getElementById（'myMap'），{}；
var pushpin=new Microsoft.Maps.pushpin（map.getCenter（）{
图标：createRedArrow（110），
锚定：新的Microsoft.Maps.Point（12,12）
});
地图。实体。推（图钉）；
函数createRedArrow（标题）{
var c=document.createElement（'canvas'）；
c、 宽度=24；
c、 高度=24；
var ctx=c.getContext（'2d'）；
//偏移画布，使我们围绕箭头的中心旋转
ctx.平移（c.宽度*0.5，c.高度*0.5）；
//按所需标题旋转画布
ctx.旋转（标题*Math.PI/180）；
//将画布偏移返回其原始位置
ctx.平移（-c.宽度*0.5，-c.高度*0.5）；
ctx.fillStyle='#f00'；
//画一条箭头形状的路径。
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（）；
//从画布生成base64图像URL。
返回c.toDataURL（）；
}
//绑定事件
Microsoft.Maps.Events.addHandler（pushpin'click'，函数（）{highlight（'pushpinClick'）；}）；
addHandler（pushpin'dblclick'，函数（）{highlight（'pushpinDblclick'）；}）；
Microsoft.Maps.Events.addHandler（pushpin'mousedown'，函数（）{highlight（'pushpinMousedown'）；}）；
addHandler（pushpin'mouseout'，函数（）{highlight（'pushpinMouseout'）；}）；
Microsoft.Maps.Events.addHandler（pushpin'mouseover'，函数（）{highlight（'pushpinMouseover'）；}）；
Microsoft.Maps.Events.addHandler（pushpin'mouseup'，函数（）{highlight（'pushpinMouseup'）；}）；
//设置打印输出面板
document.getElementById（'printoutPanel'）.innerHTML=
'ClickDblClickMousedownMouseOutmMouseOvermouseUp'；
功能突出显示（id）{
document.getElementById（id.style.background='LightGreen'；
setTimeout（函数（）{document.getElementById（id）.style.background='white'；}，1000）；
}

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

根据我的要求，事件应该只在画布的绘制部分工作，而且画布的w/h大约为100。那么，我该如何做到这一点呢

另外，如果两个或多个图钉更近（见下图），并且两个画布彼此重叠，那么我们如何识别图钉事件中两个图钉的不同

---

在这里，我用Bing地图的现有示例提供了我的需求。但这里是。

不幸的是，这是Bing地图中图钉渲染方式的一个限制。有一个选项可以将单击区域修改为圆形而不是方形，这在这里会有所帮助。请参阅

roundClickableArea

pushpin选项：

我知道

roundClickableArea

选项，但使用该选项后，图钉的一些空白部分仍然可以单击。有没有其他方法可以做到这一点？不幸的是没有。如果使用不同的地图控件，则可以使用SVG和基于HTML的图钉/标记。