Question

我们遇到了一个问题，即从台式机模拟器看清时，“此处地图”图块在测试设备（iphone）上显示为模糊。

在桌面上清除/在手机上模糊（不是一个很好的例子，因为上传时图像质量混乱了，但是在桌面上非常清晰，在我的浏览器上在iPhone上却很模糊。但是，在这两种情况下，这里都有使用条款信息并且黑色图标清晰。只是地图图块是模糊的）：

我是否需要确保CSS或JS中存在任何内容，以确保地图图块的分辨率不会像这样结束？可能与iPhone的DPI有关吗？

我们拥有的样本小提琴：https://jsfiddle.net/bhe5jgdq/

但是要注意的一件事是，即使在我们仅使用地图而没有销钉或弯曲等的DEAD简单版本中，它仍在发生。我觉得这可能与所请求的图像有关对于未指定的图块，默认设置为72 ppi，而不是使用更高的分辨率，但是我不确定如何将其传递。

我们可以尝试在任何区域进行攻击，弄清楚为什么地图最终在我们的移动设备上变得模糊不清？我认为它可能与我们移动设备上较高的DPI有关，因为它在视网膜监视器上也显示模糊。但是我不确定如何解决？

注意，我在一些文档中看到要添加的内容：

<meta name="viewport" content="initial-scale=1.0, width=device-width" />

对于移动设备的支持似乎没有什么不同，因为它的初始值已经由我们正在构建页面的网站设置，如下所示：

<meta name="viewport" content="width=device-width, maximum-scale=1, minimum-scale=1, initial-scale=1, user-scalable=no, shrink-to-fit=no">

我们正在使用：

<script src="https://js.api.here.com/v3/3.0/mapsjs-core.js" type="text/javascript" charset="utf-8"></script>
<script src="https://js.api.here.com/v3/3.0/mapsjs-service.js" type="text/javascript" charset="utf-8"></script>
<script src="https://js.api.here.com/v3/3.0/mapsjs-ui.js" type="text/javascript" charset="utf-8"></script>
<script src="https://js.api.here.com/v3/3.0/mapsjs-mapevents.js" type="text/javascript" charset="utf-8"></script>

Answer 1

创建默认图层（第二个选项）时，您可以尝试指定PPI。

var defaultLayers = platform.createDefaultLayers(512, 320);

var map = new H.Map(
document.getElementById('map'),
defaultLayers.normal.map,
{ pixelRatio: 2 }

）;

像素每英寸。可以请求的分辨率，有效值为：72 –正常，如果未提供任何值，则默认使用250 –移动电话320 –高分辨率

有关更多信息，请阅读文档 https://developer.here.com/documentation/maps/topics_api/h-service-platform.html

Answer 2

这里有一些方法可以根据设备像素比率来调整图块大小（不幸的是，框架本身并没有做到这一点）

// Step 2: initialize layer
var defaultLayers = platform.createDefaultLayers({
  tileSize: devicePixelRatio > 1 ? 512 : 256,
  ppi: devicePixelRatio > 1 ? 320 : 72
});

// Step 3: initialize the map
var map = new H.Map(
  document.getElementById('map'),
  defaultLayers.normal.map,
  {
    center: { lat: 47.056, lng: 2.350 },
    zoom: 6,
    pixelRatio: Math.min(devicePixelRatio, 2)  // capping at 2 since some devices have a pixel ratio above 2 
  }
);

在移动设备上使用Here Maps API模糊地图图像

2 个答案: