兵地圖API靜態地圖自定義圖釘圖像

Question

我使用Bingmap API使用，想用靜態地圖，我使用下面的API參考

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

我的問題是在靜態地圖，我們可以顯示自定義圖釘圖片 ？

任何快速的想法

Answer 1

不 - 你可以從內置的圖釘風格37中的一個選擇，但你不能提供自己的自定義圖標。請參閱http://msdn.microsoft.com/en-us/library/ff701719.aspx以供參考。

Answer 2

不，但是如果您向Microsoft API發出的請求與「& mmd = 1」參數相同，您將得到一個包含所有標記的像素偏移量的JSON對象。有了這些信息，您可以很容易地使用CSS渲染自定義標記，或者使用ImageMagick或類似工具自己合成圖像。

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

如果你只需要到中心的單一引腳，這可能是最常見的用例這樣的事情，你也可以生成靜態圖像，而不銷，然後使用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/