如何在我的 Bing 地图图钉上添加标签?

Posted

技术标签:

【中文标题】如何在我的 Bing 地图图钉上添加标签?【英文标题】:How can I add a label onto my Bing Maps pushpins? 【发布时间】:2021-05-03 23:55:02 【问题描述】:

我正在创建地图,在某些情况下,图钉代表事件发生的位置以及事件发生日期的重要位置。我想在图钉本身上显示按时间顺序排列的事件的顺序(用户可以通过 toollip 属性/悬停获得其他数据)。

例如,我想要一张如下所示的地图:

...看起来像这样:

有没有办法做到这一点?

【问题讨论】:

【参考方案1】:

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

设置图钉的内容属性 将 TextBlock 或 Label 添加到 MapLayer

设置图钉内容

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

例如以下代码,显示地图上图钉的 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,然后添加TextBlockLabel 以显示更长的文本:

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

【讨论】:

【参考方案2】:
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);

【讨论】:

关于 WPF Bings Map 的问题被问到 :)

以上是关于如何在我的 Bing 地图图钉上添加标签?的主要内容,如果未能解决你的问题,请参考以下文章

在 Windows Phone 8 Bing 地图上设置图钉 (XAML C#)

当只有一个图钉时,如何确定 Bing 地图的正确缩放级别?

如何将 Bing 地图的缩放级别设置为足够宽以显示所有图钉?

如何使用相机谷歌地图 xcode 移动标记(图钉)

Swift 地图图钉标注和参数

iOS 谷歌地图在地图上添加多个图钉