当前位置：文江博客话题详情

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

发布于 2024-12-20 00:16:53 字数 244 浏览 1 评论 0原文

我正在使用 Bingmap api，想要使用静态地图，我正在使用以下 api 参考

http ://msdn.microsoft.com/en-us/library/ff701724.aspx

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

任何快速的想法

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

只等公子 2024-12-27 00:16:53

否 - 您可以从 37 种内置图钉样式中选择一种，但无法提供自己的自定义图标。请参阅 http://msdn.microsoft.com/en-us/library/ff701719。 aspx 供参考。

回复收藏 0 原文

你好，陌生人 2024-12-27 00:16:53

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

回复收藏 0 原文

没有你我更好 2024-12-27 00:16:53

静态地图 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')

Custom pushpins are not supported natively in the static map api, but as @Ed said you can get metadata about the pushpin location if you need to do this.

This will require a separate call to the same endpoint as the map image with the &mmd=1 or &mapMetadata=1 query appended in the url. This returns an object with a metadata about the map including the pushpin position (minus the map image itself)

http://msdn.microsoft.com/en-us/library/hh667439.aspx

Below is a snippet showing an example of how to do this:

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

回复收藏 0 原文

烟若柳尘 2024-12-27 00:16:53

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

If you only need to center a single pin, which is probably the most common use case for this sort of thing, you can also generate a static image without a pin, and then use CSS to center your custom pin over the image.

Example HTML:

<div class="wrapper">
    <img class="map" src="path/to/bing-maps/static/image" />
    <img class="pin" src="path/to/custom/pin.jpg" />
</div>

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

Here's a working fiddle: http://jsfiddle.net/jaredjensen/fem4a556/

回复收藏 0 原文

~没有更多了~