如何在 Bing 地图图钉上添加标签？

问题描述

我正在创建地图，在某些情况下，图钉代表事件发生的位置以及事件发生的重要日期。我想在图钉本身上显示按时间顺序排列的事件的顺序（通过工具栏属性/悬停可以为用户提供额外的数据）。

例如，我想要一个看起来像这样的地图：

...看起来像这样：

有没有办法做到这一点？

解决方法

您可以使用以下任一选项：

• 设置图钉的内容属性
• 向 MapLayer 添加文本块或标签

设置图钉内容

您可以将 Content 的 Pushpin 属性设置为要在图钉上显示的文本。

例如以下代码，显示地图上图钉的 1-base 索引：

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,-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);
}

,

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);