как отформатировать текст или изменить размер шрифта внутри канцелярской кнопки в bingmaps ajax - PullRequest
Новая
       39

как отформатировать текст или изменить размер шрифта внутри канцелярской кнопки в bingmaps ajax

3 голосов
/ 21 марта 2012

Я создал канцелярскую кнопку, используя следующий код 

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

Текст, отображаемый на значке канцелярской кнопки, по умолчанию расположен на 5 пикселей ниже от верхней части значка.Я изменил высоту и ширину значка канцелярской кнопки, но не улучшил текстовый формат внутри канцелярской кнопки.Как отформатировать текст внутри канцелярской кнопки.

Я много гуглил, но не получил правильный ответ.Заранее спасибо

Ответы [ 2 ]

4 голосов
/ 22 марта 2012

Вы находитесь на правильном пути, чтобы указать свойство 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 
}

Это заставит текст Pushpin <div> иметь вышеуказанные стили. Конечно, вы можете добавить свои собственные стили в соответствии с вашим приложением.

0 голосов
/ 30 июня 2014

Я на самом деле использую опцию 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-файл.

Ссылка API: http://msdn.microsoft.com/en-us/library/gg427629.aspx

...