如何在 html 文件中将资源图像（在我的项目中定义）用于 bing map 作为图标
[英]How to use an Resource image (defined in my project) in the html file for a bing map as a icon
问题描述
I'm trying to use custom icons in my bingmap solution.
我正在尝试在我的 bingmap 解决方案中使用自定义图标。 The default icon works (ofcourse) and I can use a url for an icon.默认图标有效（当然），我可以使用 url 作为图标。 icon: "https://example.com/assets/images/my_custom_pin.png" But I want to use an image from my projects resources.图标：“https://example.com/assets/images/my_custom_pin.png”但我想使用我的项目资源中的图像。
I just can't find the way to do this.我只是找不到这样做的方法。
2 个解决方案
解决方案1
2 已采纳 2021-01-23 23:13:41
Using Bing Maps JavaScript SDK in WebBrowser or WebVeiw2在 WebBrowser 或 WebVeiw2 中使用 Bing 地图 JavaScript SDK
Assuming you are using a WebBrowser control or a WebVeiw2 control to show the map using Bing Maps JavaScript SDK, it supports data uri base64 images for pushpin icon. Assuming you are using a WebBrowser control or a WebVeiw2 control to show the map using Bing Maps JavaScript SDK, it supports data uri base64 images for pushpin icon.
So having an image in your resources, you can convert it to data uri using the following function:因此，在您的资源中有图像，您可以使用以下 function 将其转换为数据 uri：
public static string GetDataURL(Image image)
{
var bytes = (byte[])new ImageConverter().ConvertTo(image, typeof(byte[]));
return $"data:image/png;base64,{Convert.ToBase64String(bytes)}";
}
And use it as pushpin icon.并将其用作图钉图标。
Example例子
In the following example, I suppose you have an WebView2 on your form and you also ave an image called Pin in Properties.Reseources and also you have set your map key in mapKey :在下面的示例中，我假设您的表单上有一个 WebView2，并且您还在Properties.Reseources中保存了一个名为 Pin 的图像，并且您在mapKey中设置了 map 键：
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)}";
}
And you will see:你会看到：
And this is the pin image:这是图钉图片：
解决方案2
0 2021-01-23 22:06:52
Using WPF Bing Maps control使用 WPF 必应地图控件
Assuming you are using WPF Bing Maps control, you need to convert your resource image to a WPF BitmapImage , then create a WPF Image control and add it to a MapLayer and then show on the map. Assuming you are using WPF Bing Maps control, you need to convert your resource image to a WPF BitmapImage , then create a WPF Image control and add it to a MapLayer and then show on the map.
Assuming you have already followed the steps to use WPF Bing Maps in Windows Forms , also assuming you have an image file called for example Logo.png in Resources.Resx, then you can use the following code to add the image to the map: Assuming you have already followed the steps to use WPF Bing Maps in Windows Forms , also assuming you have an image file called for example Logo.png in Resources.Resx, then you can use the following code to add the image to the map:
//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);
}
And this is the result:这是结果：
Here is the image that I have in resources:这是我在资源中的图像：
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.