使用必应地图API生成带有自定义标注的静态地图图片

Question

我正在使用Bingmap API，并希望使用静态地图，我正在使用以下API参考链接：http://msdn.microsoft.com/en-us/library/ff701724.aspx。我的问题是，是否可以在静态地图上显示自定义标注图像？有什么快速的想法吗？

- d-man

Answer 1

不可以。你只能从 37 种内置的图钉样式中选择，但不能提供自定义图标。请参阅 http://msdn.microsoft.com/en-us/library/ff701719.aspx 了解更多信息。

- Alastair Aitchison

Answer 2

不，但是如果你在请求Microsoft API时加上“&mmd=1”参数，就会得到一个JSON对象，其中包括所有标记的像素偏移量。有了这些信息，你就可以使用CSS轻松地渲染自定义标记，或者用ImageMagick或类似的工具自行合成图像。

- Ed.

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

- Claytronicon

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/

- Jared