Using Bing Maps JavaScript SDK in WebBrowser or WebVeiw2
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:
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:
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:
与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
