HTMLコード内に「Azure Mapsの共有認証キー」を埋め込んでいますが、このキーは外部公開できないことに注意が必要です。
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="https://atlas.microsoft.com/sdk/javascript/mapcontrol/3/atlas.min.css" type="text/css" />
<script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/3/atlas.min.js"></script>
<script>
var map;
function GetMap() {
map = new atlas.Map("myMap", {
center: [139.76, 35.68],
zoom: 10,
language: 'ja',
fallbackLanguage: 'en',
style: 'road',
authOptions: {
authType: 'subscriptionKey',
subscriptionKey: '(Azure Mapsの共有認証キー)'
},
});
}
window.onload = GetMap;
</script>
</head>
<body>
<h1>WebView2 での Azure Maps のデモ</h1>
<div id="myMap" style="width: 100%; height: 80vh;"></div>
</body>
</html>
file://(読み込ませるファイルのフルパス)
の形式で Sourceプロパティに指定します。namespace AzureMapsWindowsForm
{
public partial class FormMain : Form
{
public FormMain()
{
InitializeComponent();
}
private void FormMain_Load(object sender, EventArgs e)
{
string FilePath = Path.GetDirectoryName(Application.ExecutablePath) + "\\Map.html";
webView21.Source = new Uri("file://"+FilePath);
}
}
}