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

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

html winforms

如何将bing地图的html文件中的资源图像（在我的项目中定义）用作图标,html,winforms,icons,bing-maps,Html,Winforms,Icons,Bing Maps,我试图在bingmap解决方案中使用自定义图标。默认图标（当然）起作用，我可以使用url作为图标。图标：“https://example.com/assets/images/my_custom_pin.png" 但我想使用项目资源中的图像我就是找不到这样做的方法。使用WPF Bing地图控件假设您使用的是WPF Bing Maps控件，则需要将资源映像转换为WPF，然后创建WPF控件并将其添加到，然后在地图上显示假设您已经按照步骤进行了操作，并且假设您在Resources.Resx中有

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

我就是找不到这样做的方法。

使用WPF Bing地图控件假设您使用的是WPF Bing Maps控件，则需要将资源映像转换为WPF，然后创建WPF控件并将其添加到，然后在地图上显示

假设您已经按照步骤进行了操作，并且假设您在Resources.Resx中有一个名为example 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);
}

这就是结果：

以下是我在参考资料中看到的图像：

在WebBrowser或WebVeiw2中使用Bing映射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，并且在

属性中保存了一个名为Pin的图像。Reseources

，并且您在

映射键中设置了映射键：
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)}";
}

string mapKey=“您的映射键”；
私有异步void Form1\u加载（对象发送方，事件参数e）
{
var html=$@”
函数GetMap（）{{
var map=new Microsoft.Maps.map（'#myMap'，{{}}）；
var center=new Microsoft.Maps.Location（3.155681101.714622）；
map.setView({{
mapTypeId:Microsoft.Maps.mapTypeId.road，
中心:中心,，
缩放：16
}});
//创建自定义图钉
var pin=新的Microsoft.Maps.Pushpin（中心{{
图标：{GetDataURL（Properties.Resources.Pin）}，
主持人：新微软地图点（12,39）
}});
//将图钉添加到地图中
地图。实体。推（销）；
}}
";
等待webView21.ensureCrewebView2Async（）；
webView21.NavigateToString（html）；
}
公共静态字符串GetDataURL（图像）
{
var bytes=（byte[]）new ImageConverter（）.ConvertTo（image，typeof（byte[]）；
返回$“data:image/png；base64，{Convert.ToBase64String（bytes）}”；
}

你会看到：

这是pin图像：
你好，雷扎，它很有魅力，谢谢！