如何在我的 Bing 地图图钉上添加标签?
How can I add a label onto my Bing Maps pushpins?
我正在创建地图,在某些情况下,图钉表示事件发生的位置以及事件的重要日期。我想在图钉本身上显示按时间顺序排列的事件的顺序(用户可以通过工具栏 property/by 悬停获得其他数据)。
例如,我想要一张如下所示的地图:
...看起来像这样:
有办法吗?
您可以使用以下任一选项:
- 设置图钉的内容属性
- 向 MapLayer 添加文本块或标签
设置图钉内容
您可以将 Content property of the Pushpin 设置为要在图钉上显示的文本。
例如以下代码,显示地图上图钉的 1 基索引:
private void button1_Click(object sender, EventArgs e)
{
var locations = new[] {
new Location(47.6424, -122.3219),
new Location(47.8424,-122.1747),
new Location(47.67856,-122.130994)};
for (int i = 0; i < locations.Length; i++)
{
var pushpin = new Pushpin() { Location = locations[i], Content = i + 1 };
this.userControl11.myMap.Children.Add(pushpin);
}
var thickNess = new Pushpin().Height;
this.userControl11.myMap.SetView(locations,
new Thickness(thickNess / 2, thickNess, thickNess / 2, 0), 0);
}
文本将被裁剪到气球区域,所以不要在那里使用长文本。
将 TextBlock 添加到 MapLayer
您还可以添加 MapLayer,然后添加 TextBlock
或 Label
以显示更长的文本:
private void button1_Click(object sender, EventArgs e)
{
var locations = new[] {
new Location(47.6424, -122.3219),
new Location(47.8424,-122.1747),
new Location(47.67856,-122.130994)};
var pushpinLayer = new MapLayer();
var height = new Pushpin().Height;
var width = new Pushpin().Width;
for (int i = 0; i < locations.Length; i++)
{
var pushpin = new Pushpin() { };
var txt = new System.Windows.Controls.TextBlock();
txt.Text = $"Lorem ipsum dolor sit amet {i + 1}";
txt.Background = new SolidColorBrush(Colors.White);
txt.Foreground = new SolidColorBrush(Colors.Black);
txt.Width = 100;
txt.TextWrapping = TextWrapping.WrapWithOverflow;
txt.TextAlignment = TextAlignment.Center;
txt.TextWrapping = TextWrapping.Wrap;
txt.Padding = new Thickness(2);
pushpinLayer.AddChild(pushpin, locations[i]);
pushpinLayer.AddChild(txt, locations[i],
new System.Windows.Point(-txt.Width / 2, -height));
}
this.userControl11.myMap.Children.Add(pushpinLayer);
this.userControl11.myMap.SetView(locations,
new Thickness(width / 2, height + 1, width / 2, 0), 0);
}
var map = new Microsoft.Maps.Map(document.getElementById('myMap'), {
supportedMapTypes: [Microsoft.Maps.MapTypeId.road, Microsoft.Maps.MapTypeId.aerial],
mapTypeId: Microsoft.Maps.MapTypeId.road,
zoom: 12
});
var loc = new Location(47.6424, -122.3219);
var DevicePin = new Microsoft.Maps.Pushpin(loc, { color: '#f00', text: 'W', title: '', subTitle: 'Subtitle' });
map.entities.push(DevicePin);
我正在创建地图,在某些情况下,图钉表示事件发生的位置以及事件的重要日期。我想在图钉本身上显示按时间顺序排列的事件的顺序(用户可以通过工具栏 property/by 悬停获得其他数据)。
例如,我想要一张如下所示的地图:
...看起来像这样:
有办法吗?
您可以使用以下任一选项:
- 设置图钉的内容属性
- 向 MapLayer 添加文本块或标签
设置图钉内容
您可以将 Content property of the Pushpin 设置为要在图钉上显示的文本。
例如以下代码,显示地图上图钉的 1 基索引:
private void button1_Click(object sender, EventArgs e)
{
var locations = new[] {
new Location(47.6424, -122.3219),
new Location(47.8424,-122.1747),
new Location(47.67856,-122.130994)};
for (int i = 0; i < locations.Length; i++)
{
var pushpin = new Pushpin() { Location = locations[i], Content = i + 1 };
this.userControl11.myMap.Children.Add(pushpin);
}
var thickNess = new Pushpin().Height;
this.userControl11.myMap.SetView(locations,
new Thickness(thickNess / 2, thickNess, thickNess / 2, 0), 0);
}
文本将被裁剪到气球区域,所以不要在那里使用长文本。
将 TextBlock 添加到 MapLayer
您还可以添加 MapLayer,然后添加 TextBlock
或 Label
以显示更长的文本:
private void button1_Click(object sender, EventArgs e)
{
var locations = new[] {
new Location(47.6424, -122.3219),
new Location(47.8424,-122.1747),
new Location(47.67856,-122.130994)};
var pushpinLayer = new MapLayer();
var height = new Pushpin().Height;
var width = new Pushpin().Width;
for (int i = 0; i < locations.Length; i++)
{
var pushpin = new Pushpin() { };
var txt = new System.Windows.Controls.TextBlock();
txt.Text = $"Lorem ipsum dolor sit amet {i + 1}";
txt.Background = new SolidColorBrush(Colors.White);
txt.Foreground = new SolidColorBrush(Colors.Black);
txt.Width = 100;
txt.TextWrapping = TextWrapping.WrapWithOverflow;
txt.TextAlignment = TextAlignment.Center;
txt.TextWrapping = TextWrapping.Wrap;
txt.Padding = new Thickness(2);
pushpinLayer.AddChild(pushpin, locations[i]);
pushpinLayer.AddChild(txt, locations[i],
new System.Windows.Point(-txt.Width / 2, -height));
}
this.userControl11.myMap.Children.Add(pushpinLayer);
this.userControl11.myMap.SetView(locations,
new Thickness(width / 2, height + 1, width / 2, 0), 0);
}
var map = new Microsoft.Maps.Map(document.getElementById('myMap'), {
supportedMapTypes: [Microsoft.Maps.MapTypeId.road, Microsoft.Maps.MapTypeId.aerial],
mapTypeId: Microsoft.Maps.MapTypeId.road,
zoom: 12
});
var loc = new Location(47.6424, -122.3219);
var DevicePin = new Microsoft.Maps.Pushpin(loc, { color: '#f00', text: 'W', title: '', subTitle: 'Subtitle' });
map.entities.push(DevicePin);