HOWTO设置Bing地图自定义图钉锚右下角

我有以下代码：HOWTO设置Bing地图自定义图钉锚右下角

<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图像的左上角的锚。不过，我的锚点位于右下角。但我无法正确设置。任何提示？我已经尝试过锚点：new Microsoft.Maps.Point（1,1）或者anchor：newMicrosoft.Maps.Point（168,107）或者anchor：newMicrosoft.Maps.Point（107,168） - 没有任何东西可以像期望。

谢谢！

UPDATE

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

来源

2014-01-14 Mike

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

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

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

来源

2014-01-14 16:49:20 Bryant

非常感谢那个伟大的小提琴科比！这对我来说是一个很大的帮助！ – Mike

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

来源

2014-01-14 13:38:47 rbrundritt

Thanks rbrundritt！（也是一个很好的方法，但我最终发现它） – Mike

HOWTO设置Bing地图自定义图钉锚右下角

回答

相关问题