我已经使用以下代码创建了图钉
var pin = new Microsoft.Maps.Pushpin(data._LatLong, {
icon: 'images/pushpin.png',
text: '1',
typeName: 'pushpinStyle'
});
默认情况下,图钉图标中显示的文本距离图标顶部5px。我已经更改了图钉图标的高度和宽度,但图钉内部的文本格式没有任何改进。如何格式化图钉内的文本。
我已经搜索了很多,但我没有得到正确的回复。提前致谢
答案 0 :(得分:4)
您可以在正确的轨道上为图钉指定typeName属性。您可能已经知道,指定typeName为pushpinStyle
将导致创建的Pushpin具有pushpinStyle
类。如果您在地图上检查生成的图钉的html,您会看到图钉文本由图钉<div>
内的绝对定位的子<div>
确定。因此,合乎逻辑的做法是使用css进一步设置图钉文本<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>
具有上述样式。当然,您可以添加自己的样式以适合您的应用。
答案 1 :(得分: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的解决方案那样使用重要的风格......我注意到这些风格在移动设备上造成了问题。每次我滚动地图时,我的自定义样式都会被删除,直到地图再次停止移动。这也是一个非常灵活的配置选项。你可以在那里放任何你想要的HTML。