3

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

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

默认情况下，图钉图标中显示的文本距离图标顶部 5px。我更改了图钉图标的高度和宽度，但图钉内的文本格式没有改进。如何格式化图钉内的文本。

我用谷歌搜索了很多，但我没有得到正确的回应。提前致谢

4

2 回答 2

4

您在正确的轨道上为您的图钉指定 typeName 属性。您可能已经知道，指定 typeNamepushpinStyle将导致创建的 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>具有上述样式。当然，您可以添加自己的样式以适合您的应用程序。

于 2012-03-21T20:45:01.253 回答
0

我实际上正在使用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

于 2014-06-30T18:56:27.663 回答