Webview 网络视图：与谷歌地图相比，Bing地图的分幅显得模糊_Webview_Windows Phone 8.1_Bing Maps_Winjs_Uwp

Webview 网络视图：与谷歌地图相比，Bing地图的分幅显得模糊

webview windows-phone-8.1 uwp

Webview 网络视图：与谷歌地图相比，Bing地图的分幅显得模糊,webview,windows-phone-8.1,bing-maps,winjs,uwp,Webview,Windows Phone 8.1,Bing Maps,Winjs,Uwp,我正在为用HTML5/JS编写的WP8.1应用程序做一点POC，该应用程序包括WebView中的地图场景：我有两个Web视图，它们的HTML结构与我所指的Web视图完全相同。在一个webview中，我正在加载加载bing地图的bing.html。在其他webview中，我通过google.html加载google地图。 bing.html和google.html具有相同的html结构，即： Bing.html <!DOCTYPE html> <html style="

我正在为用HTML5/JS编写的WP8.1应用程序做一点POC，该应用程序包括WebView中的地图

场景：我有两个Web视图，它们的HTML结构与我所指的Web视图完全相同。在一个webview中，我正在加载加载bing地图的bing.html。在其他webview中，我通过google.html加载google地图。 bing.html和google.html具有相同的html结构，即： Bing.html

    <!DOCTYPE html>
<html style="width:100%; height:100%; overflow:hidden; margin: 0 auto;">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

    <script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>
    <script type="text/javascript" src="/pages/map/bing.js"></script>
</head>
<body onload="webContext.onLoad();" style="width:100%; height:100%; overflow:hidden; margin: 0 auto;">
    <div id="mapDiv" style="position: relative; width: 100%; height: 100%"></div>
</body>
</html>

google.html

<!DOCTYPE html>
<html style="width:100%; height:100%; overflow:hidden; margin: 0 auto;">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

    <!-- Google Maps API reference -->
    <script src="http://maps.googleapis.com/maps/api/js?sensor=false&libraries=visualization"></script>
    <script src="/pages/map/map.js"></script>
</head>
<body onload="initialize()" style="width:100%; height:100%; overflow:hidden; margin: 0 auto;">
    <div id="mapdisplay" style="width:100%;height:100%; margin: 0 auto;"></div>
</body>
</html>

结果是，Bing地图的平铺看起来很模糊，不像Bing地图页面本身那样清晰。谷歌地图看起来是一流的

然而，当我从本地文件系统打开bing.html时，地图的平铺是尖锐的

这可能是一个缩放问题。尽管谷歌代码识别显示比例大于100%，但它加载所谓的视网膜或高dpi或高ppi图像。Bing地图代码有选项

enableHighDpi

手动启用：

var map = new Microsoft.Maps.Map(document.getElementById("mapDiv"),
{
    credentials: "YourBingMapsKey",
    center: new Microsoft.Maps.Location(37.769831,-122.447004),
    mapTypeId: Microsoft.Maps.MapTypeId.road,
    zoom: 12,
    enableHighDpi: true,
});

然后它会加载dpi较高的图像，这样应该不会太模糊

我不知道Bing Maps代码在检测高dpi设备时有多好（非高dpi设备不应该使用高dpi图像来保存数据）。因此，也可以使用以下代码使用CSS媒体查询检测设备像素比率，并仅在必要时加载高dpi图像：

var isHighDpiDisplay = false;
if (window.matchMedia) {
    var mq = window.matchMedia("only screen and (min--moz-device-pixel-ratio: 1.3), only screen and (-o-min-device-pixel-ratio: 2.6/2), only screen and (-webkit-min-device-pixel-ratio: 1.3), only screen  and (min-device-pixel-ratio: 1.3), only screen and (min-resolution: 1.3dppx)");
    if (mq && mq.matches || (window.devicePixelRatio > 1)) {
        isHighDpiDisplay = true;
    }
}

这可能是一个缩放问题。尽管谷歌代码识别显示比例大于100%，但它加载所谓的视网膜或高dpi或高ppi图像。Bing地图代码有选项

enableHighDpi

手动启用：

var map = new Microsoft.Maps.Map(document.getElementById("mapDiv"),
{
    credentials: "YourBingMapsKey",
    center: new Microsoft.Maps.Location(37.769831,-122.447004),
    mapTypeId: Microsoft.Maps.MapTypeId.road,
    zoom: 12,
    enableHighDpi: true,
});

然后它会加载dpi较高的图像，这样应该不会太模糊

var isHighDpiDisplay = false;
if (window.matchMedia) {
    var mq = window.matchMedia("only screen and (min--moz-device-pixel-ratio: 1.3), only screen and (-o-min-device-pixel-ratio: 2.6/2), only screen and (-webkit-min-device-pixel-ratio: 1.3), only screen  and (min-device-pixel-ratio: 1.3), only screen and (min-resolution: 1.3dppx)");
    if (mq && mq.matches || (window.devicePixelRatio > 1)) {
        isHighDpiDisplay = true;
    }
}

不幸的是，这没有帮助。。。我尝试过不同的大小，使用px not%，不同的缩放，没有任何帮助，图像仍然模糊。我尝试过从x-ms-webview切换到iframe，它变得更好了，比较两个屏幕截图发现两者之间的缩放不同。但不确定该怎么办next@sibbl我认为bing没有任何高清图像，看起来他们使用了他们的原始图像并对其进行了一些裁剪。如果在新选项卡中打开图像（因此默认情况下它们为原始比例），图像仍然模糊：/不幸的是，这没有帮助。。。我尝试过不同的大小，使用px not%，不同的缩放，没有任何帮助，图像仍然模糊。我尝试过从x-ms-webview切换到iframe，它变得更好了，比较两个屏幕截图发现两者之间的缩放不同。但不确定该怎么办next@sibbl我认为bing没有任何高清图像，看起来他们使用了他们的原始图像并对其进行了一些裁剪。如果在新选项卡中打开图像（因此默认情况下它们是原始比例），图像仍然模糊：/n您找到解决方案了吗？我浏览了所有的文档，尝试了很多设置，调整了div的大小等等，但似乎什么都不起作用。地图看起来总是很模糊…不，我很久以前就放弃了。很抱歉但如果您找到了解决方案，您可以随时回来与我们分享；）你找到解决办法了吗？我浏览了所有的文档，尝试了很多设置，调整了div的大小等等，但似乎什么都不起作用。地图看起来总是很模糊…不，我很久以前就放弃了。很抱歉但如果您找到了解决方案，您可以随时回来与我们分享；）