api - カスタム画鋲を使用した bing map api 静的マップ イメージ

Question

Bingmap API を使用しています。次の API リファレンスを使用している静的マップを使用したい

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

私の質問は静的マップについてです。カスタム画鋲画像を表示できますか?

簡単なアイデア

Answer 1

いいえ。ただし、"&mmd=1" パラメーターを使用して Microsoft API に同じ要求を行うと、すべてのマーカーのピクセル オフセットを含む JSON オブジェクトが取得されます。この情報を使用すると、CSS を使用してカスタム マーカーをかなり簡単にレンダリングしたり、ImageMagick などを使用して自分で画像を合成したりできます。

Answer 2

いいえ - 37 の組み込み画鋲スタイルから 1 つを選択できますが、独自のカスタム アイコンを提供することはできません。参照については、 http://msdn.microsoft.com/en-us/library/ff701719.aspxを参照してください。

Answer 3

カスタム画鋲は、静的マップ API ではネイティブにサポートされていませんが、@Ed が言ったように、これを行う必要がある場合は、画鋲の場所に関するメタデータを取得できます。

これには、URL に &mmd=1 または &mapMetadata=1 クエリを追加して、マップ イメージと同じエンドポイントを個別に呼び出す必要があります。これは、画鋲の位置を含む地図に関するメタデータを含むオブジェクトを返します (地図画像自体を除く)。

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')

Answer 4

おそらくこの種の最も一般的な使用例である1 つのピンを中央に配置するだけでよい場合は、ピンのない静止画像を生成し、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/