2014-01-14 2 views
2

я следующий код:Howto набор Bing Maps пользовательских канцелярской якорь правой нижней

<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, это устанавливает якорь пользовательского канцелярской кнопки в верхнем левом углу Чет изображения. Однако мой якорь находится в нижнем правом углу. Но я не могу установить правильно. Любые намеки?

Я уже пробовал якорь: новый Microsoft.Maps.Point (1,1) или якорь: новый Microsoft.Maps.Point (168,107) или якорь: новый Microsoft.Maps.Point (107,168) - ничего похожего не работает желательно.

Спасибо!

UPDATE

Эй, ребята, спасибо за ваши ответы! Я закончил вручную измерение изображения и обнаружил, что хотя изображение имеет фиксированную ширину, на правой стороне изображения (даже справа от булавки) есть тень и пространство, поэтому необходимо установить опорную точку (x, y) в левом верхнем углу (0,0) изображения точно до желаемых координат x/y на изображении. Теперь это работает наконец. Большое спасибо!

ответ

2

Я думаю, что основная причина заключается в том, что центр вашей карты отличается от местоположения кнопки.

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/

+0

Большое спасибо за эту замечательную скрипку Брайант! Это было большой помощью для меня! – Mike

1

Якорь является правильным свойством в использовании. Попробуйте использовать отрицательные значения, чтобы узнать, помогает ли это. Попробуйте привязку: новый Microsoft.Maps.Point (107,168) с изображением такого размера. Я обнаружил, что нижний правый угол изображения привязан к месту расположения кнопок, как и ожидалось.

+0

Thanks rbrundritt! (также отличный подход, но я в конце концов понял это) – Mike