Метка канцелярской кнопки может расширять границы канцелярской кнопки

Я использую js API Bing Map, чтобы добавить несколько кнопок на карту. Я хочу обозначить их чем-то особенным. Я нашел код, как это сделать, на их сайте и внес небольшие изменения.

var pushpin = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(lat - (latDiff * Math.random()), lon + (lonDiff * Math.random())), { text: 'Pushpin 278'});

map.entities.push(pushpin);

Проблема в том, что текст кажется ограниченным размером булавки (даже если я его смещаю) - поэтому он выглядит примерно так

введите здесь описание изображения

Я хочу, чтобы текст выходил за пределы канцелярской кнопки, например, как в Google Maps.

введите здесь описание изображения

Если я дам ему такое смещение, чтобы оно появилось внизу, вместо этого оно просто исчезнет.

Я не хочу «обманывать», например, делать штифты действительно большими и прозрачными или что-то в этом роде.


person Haedrian    schedule 20.06.2014    source источник


Ответы (1)


У вас есть два решения, чтобы сделать то, что вы хотите сделать.

  • Использование пользовательской HTML-метки как для изображения, так и для текста

Первое решение — использовать свойство htmlContent и создать собственный HTML-контент для кнопок.

См.: http://msdn.microsoft.com/en-us/library/gg427629.aspx

  • Использование двух кнопок для управления визуализацией по-разному

Второй — использовать первую базовую канцелярскую кнопку для изображения, а затем добавить вторую пользовательскую канцелярскую кнопку только с текстом в качестве htmlContent, чтобы у вас было две отдельные канцелярские кнопки. Это решение лучше, если вы хотите сохранить параметры изображения по умолчанию и получить гораздо лучшую читаемость при различных уровнях масштабирования.

Бонус:

Я вижу еще один способ сделать это просто: вам нужно указать ширину и высоту (обе из них), чтобы иметь возможность установить гораздо большее представление канцелярской кнопки. Таким образом, ваше представление канцелярской кнопки будет больше, и вам также потребуется указать несколько других параметров, включая: привязка, текст и textOffset.

person Nicolas Boonaert    schedule 20.06.2014