图钉标签可以扩展图钉的边界答案

【问题标题】：Pushpin Label can extend bounds of Pushpin图钉标签可以扩展图钉的边界
【发布时间】：2014-06-20 23:06:27
【问题描述】：

我正在使用 Bing Map 的 js API 在地图上放置一些图钉。我想给他们贴上特别的标签。我从他们的网站上找到了如何做到这一点的代码，并做了一些细微的改动

var pushpin = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(lat - (latDiff * Math.random()), lon + (lonDiff * Math.random())), { text: 'Pushpin 278'});

map.entities.push(pushpin);

问题是文本似乎被限制在图钉的大小（即使我偏移它） - 所以它看起来像这样

我希望文本超出图钉的范围，例如类似于 Google 地图的方式

如果我给它一个偏移量，让它出现在下面，它就会消失。

我不想“作弊”，比如让图钉变得非常大和透明等等。

【问题讨论】：

标签： bing-maps pushpin

【解决方案1】：

你有两种解决方案来做你想做的事。

对图像和文本使用自定义 HTML 图钉

第一个解决方案是使用 htmlContent 属性并创建您自己的 HTML 图钉内容。

见：http://msdn.microsoft.com/en-us/library/gg427629.aspx

使用两个图钉以不同方式管理渲染

第二个是为图像使用第一个基本图钉，然后添加第二个自定义图钉，仅将文本作为 htmlContent，这样您将拥有两个单独的图钉。如果您想保留图像的默认选项并能够在各种缩放级别获得更好的可读性体验，则此解决方案会更好。

奖金：

我看到了另一种简单的方法，您需要指定宽度和高度（两者）才能设置更大的图钉表示。这样，您的图钉表示会更大，您还需要指定其他几个选项，包括：anchor, text and textOffset。

【讨论】：