WPF中WebView2控件无法加载含OpenStreetMap的页面问题求助

核心问题分析 #

• 控件实例重复：构造函数中额外实例化了WebView2，导致代码操作的不是XAML界面上的控件
• 导航方法误用：NavigateToString用于加载HTML字符串，不能直接加载本地文件路径，应使用Navigate
• 安全策略限制：WebView2默认拦截本地文件的脚本执行，且OpenStreetMap瓦片的HTTP协议会触发混合内容拦截
• 容器高度失效：100vh在本地页面环境中无法正确计算高度，导致地图容器无显示空间

分步解决方案 #

1. 修正C#代码 #

移除冗余的控件实例化，配置WebView2安全策略并使用正确的导航方式：

using Microsoft.Web.WebView2.Wpf;
using System.Windows;
using System;

namespace RST_Mini_Simulator_WPF
{
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
            InitializeWebView2();
        }

        private async void InitializeWebView2()
        {
            await webView.EnsureCoreWebView2Async(null);
            // 允许混合内容加载（解决HTTP瓦片的拦截问题）
            webView.CoreWebView2.Settings.IsMixedContentAllowed = true;
            // 启用脚本执行
            webView.CoreWebView2.Settings.IsScriptEnabled = true;
            // 允许脚本弹窗（便于调试）
            webView.CoreWebView2.Settings.AreScriptDialogsAllowed = true;
        }

        private void btn_Click(object sender, RoutedEventArgs e)
        {
            // 使用file协议加载本地文件，注意路径格式
            string localPath = @"C:\mapPage\index.htm";
            webView.Navigate(new Uri(localPath).AbsoluteUri);
        }
    }
}

2. 修复XAML行号错误 #

Grid仅定义了两行（索引0和1），将WebView2的行号改为1：

<Window x:Class="RST_Mini_Simulator_WPF.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:RST_Mini_Simulator_WPF" 
        xmlns:wpf="clr-namespace:Microsoft.Web.WebView2.Wpf;assembly=Microsoft.Web.WebView2.Wpf"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <Button x:Name="btn" Click="btn_Click">DoIt</Button>

        <wpf:WebView2 Grid.Row="1" x:Name="webView"></wpf:WebView2>

    </Grid>
</Window>

3. 调整网页样式与脚本 #

• 修改CSS确保地图容器充满父容器：

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
}
#map{
    width:100%;
    height:100%;
}

• 改用HTTPS协议加载OpenStreetMap瓦片，避免混合内容拦截：

let mapOptions = {
    center:[-19.9129, -43.9409],
    zoom:12
}
let map = new L.map('map',mapOptions);
// 使用HTTPS协议加载瓦片
let layer = new L.TileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');
map.addLayer(layer);

4. 验证运行环境 #

确保已安装WebView2运行时，若未安装，可通过NuGet包Microsoft.Web.WebView2自动集成，或手动下载安装。

内容的提问来源于stack exchange，提问作者Ricardo De Oliveira