api - bing map 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

不，但是如果您使用“&mmd=1”参数向 Microsoft API 发出相同的请求，您将获得一个 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

如果您只需要将单个 pin 居中，这可能是此类事情最常见的用例，您还可以生成一个没有 pin 的静态图像，然后使用 CSS 将您的自定义 pin 在图像上居中。

示例 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/