Веб-обзор: плитки Bing Map выглядят размытыми по сравнению с картами Google Maps

Я делаю немного POC для приложения WP8.1, написанного в HTML5/JS, который включает в себя карты в веб-просмотрах.Веб-обзор: плитки Bing Map выглядят размытыми по сравнению с картами Google Maps

Сценарий: У меня есть 2 веб-представления с точно такой же структурой HTML. Я имею в виду веб-просмотры. В одном веб-просмотре я загружаю bing.html, который загружает карты бинга. В другом webview я загружаю карту карт google через google.html. 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. Карты Google выглядят превосходно.

Однако, когда я открываю сам bing.html из локальной файловой системы, фрагменты карты являются острыми.

источник

2015-09-18 belzebu

Вы нашли решение? Я просмотрел всю документацию, попробовал столько настроек, изменяя размеры div и т. Д., И ничего не работает. Карта всегда выглядит размытой ... –

Нет, я так давно сдался. Сожалею. Но если вы найдете решение, вы всегда можете вернуться и поделиться им с нами;) – belzebu

Возможно, это проблема масштабирования. Принимая во внимание, что код Google распознает масштабирование дисплея более 100%, он загружает так называемые изображения сетчатки или изображений с высоким разрешением и высоким разрешением. Карта код 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

Он загружает изображения высокого точек на дюйм, то, что должно быть менее размытыми.

Я не знаю, насколько хорош код Bing Maps, а затем обнаруживает устройства с высоким разрешением на дюйм (устройства с не-высоким разрешением не должны получать изображения с высоким разрешением на дюйм для сохранения данных). Поэтому не стесняйтесь также использовать следующий код для определения отношения пикселя устройства с помощью запроса на мультимедийные данные CSS и при необходимости загружать изображения с высоким разрешением на дюйм при необходимости:

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

источник

2015-09-20 14:41:06 sibbl

большое спасибо за эти советы. Я дам им попробовать позже сегодня ... – belzebu

К сожалению, это не помогло ... Я пробовал разные размеры, используя px не%, различное масштабирование, ничего не помогло, изображения все еще размыты – belzebu

Я попытался перейти от x-ms-webview к iframe, он немного улучшился, сравнив два скриншота, которые показывают, что между ними существует другое масштабирование. но не совсем уверен, что делать дальше – belzebu

Веб-обзор: плитки Bing Map выглядят размытыми по сравнению с картами Google Maps

ответ

Смежные вопросы