Bing Map API статическое изображение карты с пользовательской канцелярской кнопкой - PullRequest
Новая
       17

Bing Map API статическое изображение карты с пользовательской канцелярской кнопкой

2 голосов
/ 07 декабря 2011

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

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

У меня вопрос к статической карте: можем ли мы отобразить пользовательское изображение кнопки?1006 *

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

Ответы [ 4 ]

4 голосов
/ 08 декабря 2011

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

3 голосов
/ 12 марта 2012

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

2 голосов
/ 29 октября 2013

Пользовательские кнопки не поддерживаются изначально в 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')
1 голос
/ 01 июля 2015

Если вам нужно только центрировать один штифт , что, вероятно, является наиболее распространенным вариантом использования для такого рода вещей, вы также можете создать статическое изображение без булавки, а затем использовать 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/

...