Question

我有以下代码：

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

     function GetMap()
     {
        // Initialize the map
        map = new Microsoft.Maps.Map(document.getElementById("myMap"),
                     {credentials:"<MYAPIKEY>", zoom: 16, center: new Microsoft.Maps.Location(63.564751, 8.586110), showMapTypeSelector: false, disableZooming: true }); 

        // Retrieve the location of the map center 
        var center = map.getCenter();

        // Define the pushpin location
        var loc = new Microsoft.Maps.Location(63.563110, 8.582800);

        // Add a pin to the map
        var pin = new Microsoft.Maps.Pushpin(loc, {icon:"<?php echo get_template_directory_uri(); ?>/images/cv_pushpin.png", height:168, width:107, anchor:new Microsoft.Maps.Point(0,0), draggable: false});

        map.entities.push(pin);
     }

我遇到的问题是，当我放大或缩小地图时，自定义图钉图标会移开。我认为原因在于：

 anchor:new Microsoft.Maps.Point(0,0)

根据Bing文档，这将自定义图钉的锚点设置为thr图像的左上角。但是我的锚在右下角。但我无法正确设置。任何提示？

我已经尝试过锚点：新的Microsoft.Maps.Point（1,1）或者锚点：新的Microsoft.Maps.Point（168,107）或者锚点：新的Microsoft.Maps.Point（107,168） - 似乎没有什么能像预期的那样工作

谢谢！

更新

嘿伙计们，谢谢你的回答！我最终手动测量图像，并发现即使图像具有固定的宽度，图像右侧也有一些阴影和空间（甚至是图钉的右侧），因此需要设置锚点（ x，y）从图像的左上角（0,0）精确到图像上所需的x / y坐标。现在终于有效了。非常感谢！

Answer 1

我认为主要原因是因为地图的中心与图钉的位置不同。

center: new Microsoft.Maps.Location(63.564751, 8.586110)

vs

// Define the pushpin location
var loc = new Microsoft.Maps.Location(63.563110, 8.582800);

如果您希望地图在中心放大和缩小图钉，那么这些必须相同。

至于锚，因为（0,0）是左上角，要获得中心，你只需要使用图钉宽度和高度的一半。所以（53,84）。

我在Jsfiddle中创建了一个工作示例，以便您可以看到该行为。

http://jsfiddle.net/bryantlikes/82BZA/1/

Answer 2

锚是正确的属性。尝试使用负值来查看是否有帮助。尝试锚点：新的Microsoft.Maps.Point（107,168），其大小的图像我发现图像的右下角与预期的图钉位置相关联。

如何将Bing Maps自定义图钉锚设置到右下角

2 个答案: