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

不，但如果您使用“＆amp; mmd = 1”参数向Microsoft API发出相同的请求，则会获得一个JSON对象，其中包含所有标记的像素偏移量。使用此信息，您可以使用CSS轻松渲染自定义标记，或使用ImageMagick或类似方法自行合成图像。

Answer 3

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

这需要单独调用与地图图像相同的端点，并在网址中附加＆amp; mmd = 1或＆amp; 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/

bing map api静态地图图像与自定义图钉

4 个答案: