Webview: Bing Map tiles appear to be blurred compared to Google Maps ones

问题

I'm doing a bit of a POC for the WP8.1 application written in HTML5/JS that includes the maps in the webviews.

Scenario: I have 2 webviews with exactly the same HTML structure I'm referring the webviews to. In one webview I'm loading the bing.html that loads the bing maps. In other webview I'm loading the google maps map via the google.html. bing.html and google.html have the same HTML structure and that is: 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>

And the result is, that the Bing Map tiles appear to be blurred, not as sharp as on bing maps page itself. Google Maps look top notch.

However, when I open the bing.html itself from local file system, the map tiles are sharp.

回答1:

Possibly this is a scaling issue. Whereas the Google code recognizes the display scaling to be greater than 100%, it loads so called retina or high-dpi or high-ppi images. The Bing map code has the option enableHighDpi to enable it manually:

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

It loads high dpi images then, which should be less blurry.

I don't know how good the Bing Maps code then detects high dpi devices (non-high-dpi devices shouldn't get high-dpi images to save data.). So feel free to also use the following code to detect the device pixel ratio using a CSS media query and only load high dpi images if necessary:

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;
    }
}

来源：https://stackoverflow.com/questions/32662723/webview-bing-map-tiles-appear-to-be-blurred-compared-to-google-maps-ones

标签

webview

windows-phone-8.1

bing-maps

winjs

uwp