IE11中'google'未定义错误：WinForms WebBrowser谷歌地图问题

我之前也碰到过类似的问题，WinForms的WebBrowser控件因为默认的IE兼容模式和脚本执行时机的冲突，经常会和Google Maps API的异步加载产生矛盾。咱们一步步来搞定这个问题：

问题原因分析 #

1. WebBrowser默认兼容模式过低：WebBrowser控件默认会使用IE7甚至更低的兼容模式，而现代Google Maps API对旧IE版本支持很差，甚至会加载失败，直接导致google对象未定义。虽然你已经加了<meta http-equiv="X-UA-Compatible" content="IE=edge" />，但这个标签在WebBrowser控件里大概率会被忽略，必须通过代码或注册表强制设置。
2. 脚本执行时机不匹配：Google Maps API是异步加载的（你用了async defer），如果你的WinForms代码在API还没加载完成时就调用AddPoint函数，或者控件的DOM加载事件触发过早，就会出现google未定义的错误。

具体解决方案 #

1. 强制WebBrowser使用最新IE模式 #

这是最核心的一步，让控件用IE11的渲染引擎加载页面，确保对Google Maps API的完整支持。在你的WinForms窗体构造函数里添加以下代码（需要引用Microsoft.Win32）：

using Microsoft.Win32;
using System.Diagnostics;

public YourFormName()
{
    InitializeComponent();
    
    // 设置WebBrowser使用IE11 Edge模式
    string appExeName = Process.GetCurrentProcess().ProcessName + ".exe";
    using (RegistryKey key = Registry.CurrentUser.CreateSubKey(
        @"Software\Microsoft\Internet Explorer\Main\FeatureControl\FEATURE_BROWSER_EMULATION"))
    {
        // 11001对应IE11 Edge模式，11000对应IE11标准模式，按需选择
        key.SetValue(appExeName, 11001, RegistryValueKind.DWord);
    }
}

2. 确保API加载完成后再执行交互操作 #

在HTML里添加一个全局标志，标记地图是否初始化完成，这样WinForms代码可以等待这个标志为true后再调用AddPoint，避免提前触发错误：

修改HTML的脚本部分：

<script>
var map;
var prevLat = 0;
var prevLon = 0;
// 添加全局标志，标记地图是否准备就绪
window.mapIsReady = false;

function initMap() {
    var centerPoint = {lat: 12.9716, lng: 77.5946};
    map = new google.maps.Map(document.getElementById('map'), {
        zoom: 15,
        center: centerPoint
    });
    // 地图初始化完成后更新标志
    window.mapIsReady = true;
}

function AddPoint(latitude, longitude, heading, fixTypeColor, portNumber){
    // 先检查google对象和地图就绪状态，避免报错
    if (typeof google === 'undefined' || !window.mapIsReady) {
        // 延迟100ms重试，直到API加载完成
        setTimeout(function() {
            AddPoint(latitude, longitude, heading, fixTypeColor, portNumber);
        }, 100);
        return;
    }
    
    // 原有的AddPoint逻辑
    if(prevLat == 0 && prevLon == 0) {
        var Coordinates = [ {lat: latitude, lng: longitude} ];
    } else {
        var Coordinates = [ {lat: prevLat, lng: prevLon}, {lat: latitude, lng: longitude} ];
    }
    prevLat = latitude;
    prevLon = longitude;
    var newPoint = {lat: latitude, lng: longitude};
    var lineSymbol = {
        path: google.maps.SymbolPath.FORWARD_OPEN_ARROW,
        rotation: heading
    };
    var polyLine = new google.maps.Polyline({
        map: map,
        path: Coordinates,
        icons: [{
            icon: lineSymbol,
            fixedRotation: true,
            offset: '100%'
        }],
        geodesic: true,
        strokeColor: fixTypeColor,
        strokeOpacity: 1.0,
        strokeWeight: 2
    });
    map.panTo(newPoint);
}
</script>

然后在WinForms代码里，调用AddPoint之前先等待地图就绪：

private void UpdateMapPoint(double lat, double lon, int heading, string color, string port)
{
    // 循环等待地图准备完成
    while (!(bool)webBrowser1.Document.InvokeScript("eval", new object[] { "window.mapIsReady" }))
    {
        Application.DoEvents();
        Thread.Sleep(50);
    }
    
    // 调用HTML中的AddPoint函数
    webBrowser1.Document.InvokeScript("AddPoint", new object[] { lat, lon, heading, color, port });
}

3. 屏蔽脚本错误弹窗（可选） #

如果你已经解决了根源问题，但还是想避免偶尔的错误弹窗，可以设置WebBrowser的ScriptErrorsSuppressed属性为true：

webBrowser1.ScriptErrorsSuppressed = true;

不过这只是治标手段，建议优先解决前面的根源问题。

按照上面的步骤处理后，应该就不会再出现google未定义的错误了，地图可以正常初始化和添加点位。

内容的提问来源于stack exchange，提问作者Saurabh Prasun