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