Xamarin.Forms WebView加载OpenLayers地图失败问题求助

既然你的WebView能正常显示文本和触发alert('test')，说明WebView的JavaScript和基础渲染功能都没问题，地图加载失败基本是两个常见原因导致的：Android 9的HTTP请求限制，或者地图容器没有设置明确尺寸。下面一步步来解决：

1. 解除Android 9的HTTP网络限制 #

Android 9（API 28）默认禁止应用发起非HTTPS的网络请求，而你代码里引用的OpenLayers脚本是http://www.openlayers.org/api/OpenLayers.js，还有OSM的默认瓦片也是HTTP地址，这些请求都会被系统拦截。

具体操作： #

在Android项目的Resources/xml文件夹下新建network_security_config.xml文件，内容如下：

<?xml version="1.0" encoding="utf-8"?>
<network-security-config>
    <base-config cleartextTrafficPermitted="true">
        <trust-anchors>
            <certificates src="system" />
        </trust-anchors>
    </base-config>
</network-security-config>

接着打开AndroidManifest.xml，给<application>标签添加这个配置的引用：

<application ... android:networkSecurityConfig="@xml/network_security_config">

2. 给地图容器设置明确的宽高样式 #

你的HTML里的mapdiv没有设置任何尺寸，OpenLayers需要一个有固定宽高的容器才能渲染地图。把<div id='mapdiv'>改成：

<div id='mapdiv' style="width: 100%; height: 500px;"></div>

这样容器就有了明确的高度和自适应宽度，地图就能正常渲染了。

3. 优先使用HTTPS资源（推荐） #

为了避免后续的安全警告和兼容性问题，建议把OpenLayers的脚本地址换成HTTPS版本：

<script src='https://openlayers.org/api/OpenLayers.js'></script>

OSM的瓦片也支持HTTPS，OpenLayers会自动适配，这样也能减少网络限制带来的问题。

4. 确认WebView的基础配置（可选） #

虽然alert能运行说明JavaScript已经启用，但如果还是有问题，可以在Android项目的MainActivity.cs里确认WebView的设置：

protected override void OnCreate(Bundle savedInstanceState)
{
    base.OnCreate(savedInstanceState);
    global::Xamarin.Forms.Forms.Init(this, savedInstanceState);
    // 如果你用了自定义WebView渲染器，可以在这里确保JS、缩放等功能开启
    // 比如：Control.Settings.JavaScriptEnabled = true;
}

修改后的完整HTML代码示例 #

var htmlSource = new HtmlWebViewSource();
htmlSource.Html = @"<html> 
<head> 
<script src='https://openlayers.org/api/OpenLayers.js'></script> 
</head> 
<body> 
App 
<div id='mapdiv' style='width: 100%; height: 500px;'></div> 
<script> 
alert('test'); 
map = new OpenLayers.Map('mapdiv'); 
map.addLayer(new OpenLayers.Layer.OSM()); 
var lonLat = new OpenLayers.LonLat(-0.1279688, 51.5077286) 
.transform( 
new OpenLayers.Projection('EPSG:4326'), 
map.getProjectionObject() 
); 
var zoom = 16; 
var markers = new OpenLayers.Layer.Markers('Markers'); 
map.addLayer(markers); 
markers.addMarker(new OpenLayers.Marker(lonLat)); 
map.setCenter(lonLat, zoom); 
</script> 
</body></html>";

按照这些步骤修改后，你的地图应该就能在Android 9的WebView里正常加载了。

内容的提问来源于stack exchange，提问作者luciano cba