如何在bingmaps ajax中设置文本格式或更改图钉内部的字体大小 [英] how to format the text or change the font size inside pushpin in bingmaps ajax

问题描述

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

I've created pushpin using the follwing code

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

默认情况下，图钉图标中显示的文本距离图标顶部下方5像素.我更改了图钉图标的高度和宽度，但是图钉内部的文本格式没有任何改善.如何设置图钉内部的文本格式.

Text displayed in the pushpin icon is 5px below from top of the icon by default. I've changed the height and width of the pushpin icon, but no improvement in text format inside the pushpin. How to format the text inside the pushpin.

我在Google上搜索了很多，但是没有得到正确的答复.预先感谢

I've googled a lot but i didn't get the correct response. Thanks in advance

推荐答案

您将在正确的位置上为图钉指定typeName属性.您可能已经知道，将typeName指定为pushpinStyle将导致创建的图钉具有pushpinStyle类.如果您在地图上检查图钉的生成的html，您将看到图钉文本由图钉<div>中绝对定位的子元素<div>改写.因此，逻辑上的事情是使用CSS进一步设置图钉文本<div>的样式.例如，您可以执行以下操作:

You are on the right track to specify the typeName property for your Pushpin. As you probably already know, specifying a typeName of pushpinStyle will cause the created Pushpin to have a class of pushpinStyle. If you inspect the generated html of your Pushpin on the map, you will see that the Pushpin text is reaized by an absolutely positioned child <div> inside the Pushpin <div>. So the logical thing to do would be to use css to further style the Pushpin text <div>. For example, you can do the following:

.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>具有上述样式.当然，您可以添加自己的样式以适合您的应用程序.

This will cause the Pushpin text <div> to have the above styles. Of course you can add your own styles to suit your application.

这篇关于如何在bingmaps ajax中设置文本格式或更改图钉内部的字体大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！