Webview:与Google Maps相比，Bing Map磁贴似乎模糊了 [英] Webview: Bing Map tiles appear to be blurred compared to Google Maps ones
问题描述
我正在为用HTML5/JS编写的WP8.1应用程序做一些POC，其中包括Web视图中的地图.
I'm doing a bit of a POC for the WP8.1 application written in HTML5/JS that includes the maps in the webviews.
场景:我有2个Web视图，它们具有与我所引用的Web视图完全相同的HTML结构.在一个Web视图中，我正在加载bing.html，该bing会加载bing地图.在其他网络视图中，我正在通过google.html加载google maps地图. bing.html和google.html具有相同的HTML结构，即: Bing.html
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
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>
结果是，必应地图"图块看起来是模糊的，不如必应地图"页面本身那样清晰. Google Maps看起来是一流的.
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.
但是，当我从本地文件系统中打开bing.html本身时，地图图块变得清晰.
However, when I open the bing.html itself from local file system, the map tiles are sharp.
推荐答案
可能这是一个扩展问题. Google代码识别出的显示比例大于100％，但它会加载所谓的视网膜图像或高dpi或高ppi图像.必应地图代码具有选项enableHighDpi来手动启用它:
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,
});
然后它会加载高dpi的图像，这应该减少模糊程度.
It loads high dpi images then, which should be less blurry.
我不知道Bing Maps代码能检测出高dpi的设备(非高dpi的设备不应获取高dpi的图像来保存数据).因此，您还可以使用以下代码通过CSS媒体查询来检测设备像素比率，并在必要时仅加载高dpi图像:
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;
}
}
这篇关于Webview:与Google Maps相比，Bing Map磁贴似乎模糊了的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
