Question

我正在为HTML5 / JS编写的WP8.1应用程序做一些POC，其中包括webview中的地图。

场景：我有两个网页浏览具有完全相同的HTML结构，我将网页浏览引用到。在一个webview中，我加载了加载bing贴图的bing.html。在其他网页浏览中，我通过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 Map图块看起来很模糊，不像bing map页面本身那样清晰。谷歌地图看起来很顶级。

但是，当我从本地文件系统打开bing.html时，地图图块很清晰。

Answer 1

这可能是一个扩展问题。虽然Google代码识别显示比例大于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,
});

source

然后加载高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;
    }
}

Webview：Bing地图图块与Google地图图块相比显得模糊

1 个答案: