如何在Bing地图Ajax中更改推钉内的文本格式或字体大小

Question

我使用以下代码创建了图钉

var pin = new Microsoft.Maps.Pushpin(data._LatLong, {
        icon: 'images/pushpin.png',        
        text: '1',
        typeName: 'pushpinStyle'
    });

默认情况下，推销图标中显示的文本距离图标顶部5像素。我已经更改了推销图标的高度和宽度，但在推销图标内部没有改善文本格式。如何格式化推销图标内部的文本。

我已经搜索了很多，但没有得到正确的答案。提前致谢。

- Mohan Kumar

Answer 1

您正在正确的路上，为您的 Pushpin 指定 typeName 属性。可能您已经知道，指定 typeName 为 pushpinStyle 会使创建的 Pushpin 具有类 pushpinStyle。如果您检查地图上 Pushpin 的生成 html，您会发现 Pushpin 文本是由绝对定位的子 <div> 实现的，放置在 Pushpin 的 <div> 中。因此，逻辑上应该使用 css 进一步设计 Pushpin 文本 <div>。例如，您可以这样做：

.pushpinStyle div{
    color: black !important; /*Make Pushpin text black*/
    left: 5px !important;  /*Since Pushpin text is absolutely positioned, this will cause the text to be 5 pixels from the left instead of 0 pixels */
    text-shadow: 1px 0px white, -1px 0px white, 0px -1px white, 0px 1px white;  /*Give the text all around white text shadow so it looks nice on browsers that support it*/
    font: 12px arial,sans-serif; !important // override default fonts 
}

这将使得图钉文字 <div> 具有上述样式。当然，您可以添加自己的样式以适应您的应用程序。

- Bojin Li

---

你好@Bojin Li，我需要一点帮助。在Microsoft.Maps.Pushpin属性中，默认已经给出了pushpin的字体属性。我想覆盖pushpin的字体属性。这是否可能？提前致谢。 - Mohan Kumar

当然可以，只需在更具体的范围内指定字体CSS。或者您可以使用!important关键字。请查看我的更新答案。 - Bojin Li

Bojin Li：你最新的编辑中有一些小的错别字/语法错误。不过输入很好。 - Aidanapword

Answer 2

我实际上是在推针上使用了htmlContent选项：

var pin = new Microsoft.Maps.Pushpin(data._LatLong, {
    typeName: 'pushpinStyle',
    htmlContent: '<img src="images/pushpin.png" alt=""/>' +
                 '<span>'+resultNum.toString()+'</span>'
});

这样做就不必像@Bojin Li的解决方案那样使用!important样式的恶心了...我注意到这在移动设备上会引起问题。每次我滚动地图时，我的自定义样式都会被删除，直到地图再次停止移动。这也是一个非常灵活的配置选项。您可以在其中放置任何html。

API参考：http://msdn.microsoft.com/en-us/library/gg427629.aspx

- Tim Kindberg