如何将 html 文件中的资源图像（在我的项目中定义）用作 bing 地图的图标

Question

我正在尝试在我的 bingmap 解决方案中使用自定义图标。默认图标有效（当然），我可以使用 url 作为图标。图标：“https://example.com/assets/images/my_custom_pin.png” 但是我想使用我的项目资源中的图像。

我就是找不到方法。

Answer 1

使用 WPFBing 地图控件

假设您正在使用 WPF Bing 地图控件，您需要将您的资源图像转换为 WPF BitmapImage, then create a WPF Image control and add it to a MapLayer 然后在地图上显示。

假设您已经按照的步骤进行操作，同时假设您在 Resources.Resx 中有一个名为 Logo.png 的图像文件，那么您可以使用以下代码添加图片到地图：

//using Microsoft.Maps.MapControl.WPF;
//using System;
//using System.IO;
//using System.Windows.Controls;
//using System.Windows.Forms;
//using System.Windows.Media.Imaging;
private void Form1_Load(object sender, EventArgs e)
{
    this.userControl11.myMap.AnimationLevel = AnimationLevel.Full;
    this.userControl11.myMap.Loaded += MyMap_Loaded;
}
private void MyMap_Loaded(object sender, System.Windows.RoutedEventArgs e)
{
    MapLayer imageLayer = new MapLayer();
    var resxImage = Properties.Resources.Pin;
    var image = new Image() { Width = resxImage.Width, Height = resxImage.Height };
    var bmp = new BitmapImage();
    using (var ms = new MemoryStream())
    {
        resxImage.Save(ms, System.Drawing.Imaging.ImageFormat.Png);
        ms.Position = 0;
        bmp.BeginInit();
        bmp.StreamSource = ms;
        bmp.CacheOption = BitmapCacheOption.OnLoad;
        bmp.EndInit();
        bmp.Freeze();
    }
    image.Source = bmp;
    var location = new Location(3.155681, 101.714622);
    PositionOrigin position = PositionOrigin.BottomLeft;
    imageLayer.AddChild(image, location, position);
    this.userControl11.myMap.SetView(location, 16);
    this.userControl11.myMap.Children.Add(imageLayer);
}

这是结果：

这是我在资源中的图片：

Answer 2

在 WebBrowser 或 WebVeiw2 中使用 Bing Maps JavaScript SDK

假设您使用 WebBrowser 控件或 WebVeiw2 控件显示地图，使用 Bing Maps JavaScript SDK，它支持图钉图标的数据 uri base64 图像。

因此，在您的资源中有一个图像，您可以使用以下函数将其转换为数据 uri：

public static string GetDataURL(Image image)
{
    var bytes = (byte[])new ImageConverter().ConvertTo(image, typeof(byte[]));
    return $"data:image/png;base64,{Convert.ToBase64String(bytes)}";
}

并将其用作图钉图标。

例子

在下面的示例中，我假设您的表单上有一个 WebView2，您还在 Properties.Reseources 中有一个名为 Pin 的图像，并且您还在 mapKey 中设置了地图键：

string mapKey = "YOUR MAP KEY";
private async void Form1_Load(object sender, EventArgs e)
{
    var html = $@"
    <!DOCTYPE html>
    <html>
    <head>
        <title></title>
        <meta charset=""utf-8"" />
        <script type=""text/javascript"">
        function GetMap() {{
            var map = new Microsoft.Maps.Map('#myMap', {{}});

            var center = new Microsoft.Maps.Location(3.155681, 101.714622);
            map.setView({{
                mapTypeId: Microsoft.Maps.MapTypeId.road,
                center: center,
                zoom: 16
            }});
            //Create custom Pushpin
            var pin = new Microsoft.Maps.Pushpin(center, {{
                icon: '{GetDataURL(Properties.Resources.Pin)}',
                anchor: new Microsoft.Maps.Point(12, 39)
            }});

            //Add the pushpin to the map
            map.entities.push(pin);
        }}
        </script>
        <script type=""text/javascript"" 
          src=""https://www.bing.com/api/maps/mapcontrol?callback=GetMap&key={mapKey}""
          async defer></script>
    </head>
    <body>
        <div id=""myMap"" style=""position:relative;width:400px;height:300px;""></div>
    </body>
    </html>";

    await webView21.EnsureCoreWebView2Async();
    webView21.NavigateToString(html);
}
public static string GetDataURL(Image image)
{
    var bytes = (byte[])new ImageConverter().ConvertTo(image, typeof(byte[]));
    return $"data:image/png;base64,{Convert.ToBase64String(bytes)}";
}

你会看到：

这是图钉图片：

如何将 html 文件中的资源图像（在我的项目中定义）用作 bing 地图的图标

How to use an Resource image (defined in my project) in the html file for a bing map as a icon

html

winforms

icons

bing-maps

使用 WPFBing 地图控件

在 WebBrowser 或 WebVeiw2 中使用 Bing Maps JavaScript SDK