将地图视口点击位置转换为地图坐标（Bing 地图）答案

【问题标题】：Convert map viewport click position to map coordinates (Bing maps)将地图视口点击位置转换为地图坐标（Bing 地图）
【发布时间】：2014-06-24 01:28:46
【问题描述】：

所以我有一个 canvas 覆盖在 Bing JavaScript v7 地图上，其想法是当用户单击画布时，它会在同一点在其后面的地图中创建一个图钉。

但是，在我当前的杂乱无章的代码中，图钉总是放在错误的位置。小提琴供参考； http://jsfiddle.net/89SCq/2/

我怎样才能解决数学问题以使其工作？注意：我必须使用覆盖画布而不是直接在地图上捕获点击事件。

【问题讨论】：

标签： javascript canvas map bing-maps

【解决方案1】：

好的，如果你必须使用画布，你可以计算用户在画布上点击的像素坐标，然后通过 tryPixelToLocation 方法相对于地图控件的位置传递这些坐标。这是您的点击事件的更新版本：

$("canvas").click(function(e){
    var relativeX = e.pageX - this.offsetLeft;
    var relativeY = e.pageY - this.offsetTop;

    var loc = map.tryPixelToLocation(new Microsoft.Maps.Point(relativeX, relativeY), Microsoft.Maps.PixelReference.control);

    // push pin; location is top right corner in degs plus a portion of map degree dimension based on relative click pos
    map.entities.push(
        new Microsoft.Maps.Pushpin(loc, null)
    );

    // DEBUG; zoom out to show marker pos
    map.setView({ zoom: 9 });    
});

【讨论】：

【解决方案2】：

你为什么使用画布？为什么不像这样向地图添加点击事件：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
  <title></title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

  <script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>
  <script type="text/javascript">
    var map;

    function GetMap()
    {   
        map = new Microsoft.Maps.Map(document.getElementById("myMap"), { 
            credentials: "YOUR_BING_MAPS_KEY"
        });

        Microsoft.Maps.Events.addHandler(map, 'click', addPushpin);
    }

    function addPushpin(e){
        var loc = map.tryPixelToLocation(new Microsoft.Maps.Point(e.getX(), e.getY()));
        var pin = new Microsoft.Maps.Pushpin(loc);
        map.entities.push(pin);
    }
    </script>
</head>
<body onload="GetMap();">
    <div id='myMap' style='position:relative;width:800px;height:600px;'></div>
</body>
</html>

【讨论】：

谢谢，但正如我在问题中所说，我需要使用画布。小提琴是一个演示环境，不能反映我的实际用例，但我仍然有这个像素到坐标的转换问题。