Question

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

然而，在我目前使用的kludged代码中，总是将图钉置于错误的位置。小提琴参考; http://jsfiddle.net/89SCq/2/

如何修复数学以使其工作？注意：我必须使用重叠的画布，而不是直接在地图上捕获点击事件。

Answer 1

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

<!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>

Answer 2

好的，如果你必须使用画布，你可以计算画布上用户点击的像素坐标，然后通过相对于地图控件位置的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 });    
});

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

2 个答案: