bing地图api带有自定义图钉的静态地图图像

我正在使用BingMapAPI，想使用静态映射我正在使用以下api参考

我的问题是静态地图我们可以显示自定义图钉图像吗

---

任何快速想法

否-您可以从37种内置图钉样式中选择一种，但不能提供自己的自定义图标。请参阅以获取参考。

否，但如果使用“&mmd=1”参数向Microsoft API发出相同的请求，则会得到一个JSON对象，其中包含所有标记的像素偏移量。有了这些信息，您可以非常轻松地使用CSS呈现自定义标记，或者自己使用ImageMagick或类似工具合成图像。

静态地图api本机不支持自定义图钉，但正如@Ed所说，如果需要，您可以获取图钉位置的元数据

这将需要单独调用与地图图像相同的端点，并在url中附加&mmd=1或&mapMetadata=1查询。这将返回一个对象，其中包含有关地图的元数据，包括图钉位置（减去地图图像本身）

下面是一个演示如何执行此操作的示例片段：

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

//pushpinData是调用返回的对象
//anchor属性是这样的对象{x:200，y:100}
var pushpinPosition=pushpinData.resourceSets[0]。资源[0]。图钉[0]。锚定；
//偏移用于对图像放置进行微小调整
var pushpinXPos=pushpinPosition.x-xoffset；
var pushPinYPos=pushpinPosition.y-$（“#myMap”）.height（）-yoffset；
var pushpin=“”；
$（“#myMap”）.append（图钉）；
$（'#pushpinImg'）.css（'margin-left'，pushpinXPos+'px'））
$（'#pushpinImg'）.css（'margin-top'，pushPinYPos+'px'））

如果您只需要将一个管脚居中，这可能是这类事情最常见的用例，您还可以生成一个没有管脚的静态图像，然后使用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>

这是一把小提琴：

.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;
}