изображение статической карты bing map api с настраиваемой канцелярской кнопкой

Я использую Bingmap API, хочу использовать статическую карту, я использую следующую ссылку API

http://msdn.microsoft.com/en-us/library/ff701724.aspx

Мой вопрос касается статической карты, можем ли мы отобразить пользовательское изображение канцелярской кнопки?

любая быстрая идея


person d-man    schedule 07.12.2011    source источник


Ответы (4)


Нет — вы можете выбрать один из 37 встроенных стилей канцелярских кнопок, но вы не можете предоставить свой собственный значок. См. http://msdn.microsoft.com/en-us/library/ff701719.aspx для справки.

person Alastair Aitchison    schedule 08.12.2011

Нет, но если вы сделаете тот же запрос к Microsoft API с параметром «&mmd=1», вы получите объект JSON, который включает смещения всех маркеров в пикселях. С помощью этой информации вы могли бы довольно легко отображать пользовательские маркеры с помощью CSS или создавать изображения самостоятельно с помощью ImageMagick или подобных.

person Ed.    schedule 12.03.2012

Пользовательские канцелярские кнопки изначально не поддерживаются в API статической карты, но, как сказал @Ed, вы можете получить метаданные о местоположении канцелярской кнопки, если вам это нужно.

Для этого потребуется отдельный вызов той же конечной точки, что и изображение карты, с добавлением запроса &mmd=1 или &mapMetadata=1 к URL-адресу. Это возвращает объект с метаданными о карте, включая положение канцелярской кнопки (минус само изображение карты).

http://msdn.microsoft.com/en-us/library/hh667439.aspx

Ниже приведен фрагмент, показывающий пример того, как это сделать:

// pushpinData is the returned object from the call
// the anchor property is an object like this {x:200,y:100}
var pushpinPosition = pushpinData.resourceSets[0].resources[0].pushpins[0].anchor;
// the offsets are to do minor adjustments of the image placement
var pushpinXPos = pushpinPosition.x - xoffset;
var pushPinYPos = pushpinPosition.y - $("#myMap").height()- yoffset;

var pushpin = "<img id='pushpinImg' src='marker.png'></img>";
$("#myMap").append(pushpin);
$('#pushpinImg').css('margin-left', pushpinXPos + 'px')
$('#pushpinImg').css('margin-top', pushPinYPos + 'px')
person Claytronicon    schedule 29.10.2013

Если вам нужно центрировать только одну булавку, что, вероятно, является наиболее распространенным вариантом использования для такого рода вещей, вы также можете создать статическое изображение без булавки, а затем использовать CSS для центрирования вашего пользовательского закрепить изображение.

Пример HTML:

<div class="wrapper">
    <img class="map" src="path/to/bing-maps/static/image" />
    <img class="pin" src="path/to/custom/pin.jpg" />
</div>

Пример CSS:

.wrapper {
    max-width: 400px;    
    position: relative;
}
.map {
    display: block;
    width: 100%;
}
.pin {
    display: block;
    height: 34px;
    left: 50%;
    margin-left: -10px;
    margin-top: -34px;    
    position: absolute;
    top: 50%;
    width: 20px;
}

Вот рабочая скрипка: http://jsfiddle.net/jaredjensen/fem4a556/

person Jared    schedule 01.07.2015