Here api 光栅地图不';3.1版本后,无法正常工作
我将JavaScript的MapsAPI更新为3.1v。之后,光栅地图无法正确显示。经过一些缩放后,图片不清晰,字体有问题。实际: 我尝试过使用一些不同的像素比例和其他贴图类型,但没有效果。有虫子吗 这是我初始化映射的方式:Here api 光栅地图不';3.1版本后,无法正常工作,here-api,Here Api,我将JavaScript的MapsAPI更新为3.1v。之后,光栅地图无法正确显示。经过一些缩放后,图片不清晰,字体有问题。实际: 我尝试过使用一些不同的像素比例和其他贴图类型,但没有效果。有虫子吗 这是我初始化映射的方式: var platform = new H.service.Platform({ 'apikey': apiKey, }); $scope.defaultLayers = platform.createDefaultLayers({
var platform = new H.service.Platform({
'apikey': apiKey,
});
$scope.defaultLayers = platform.createDefaultLayers({
tileSize: pixelRatio === 1 ? 256 : 512,
ppi: pixelRatio === 1 ? undefined : 320,
pois: true
});
$scope.geocoder = platform.getGeocodingService();
$scope.map = new H.Map(
document.getElementById("here-map-canvas"),
$scope.defaultLayers.raster.normal.map,
{
zoom: 12,
center: { lat: officeLat, lng: officeLng }
});
$scope.markerGroup = new H.map.Group();
$scope.map.addObject($scope.markerGroup);
var behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents($scope.map)); //Step 3: make the map interactive
$scope.ui = H.ui.UI.createDefault($scope.map, $scope.defaultLayers); ```
**Please check imgs:**
Actual: https://i.stack.imgur.com/Vu17g.jpg
Expected: https://i.stack.imgur.com/Tcid8.jpg
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Refs:
<link rel="stylesheet" type="text/css" href="https://js.api.here.com/v3/3.1/mapsjs-ui.css?dp-version=1549984893" />
<script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-core.js"></script>
<script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-core-legacy.js"></script>
<script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-service.js"></script>
<script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-service-legacy.js"></script>
<script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-ui.js"></script>
<script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-mapevents.js"></script>
var平台=新的H.service.platform({
“apikey”:apikey,
});
$scope.defaultLayers=platform.createDefaultLayers({
tileSize:pixelRatio==1?256:512,
ppi:pixelRatio==1?未定义:320,
是的
});
$scope.geocoder=platform.getGeocodingService();
$scope.map=新的H.map(
document.getElementById(“此处为地图画布”),
$scope.defaultLayers.graster.normal.map,
{
缩放:12,
中心:{lat:officeLat,lng:officeling}
});
$scope.markerGroup=new H.map.Group();
$scope.map.addObject($scope.markerGroup);
var behavior=newh.mapevents.behavior(newh.mapevents.mapevents($scope.map))//步骤3:使地图具有交互性
$scope.ui=H.ui.ui.createDefault($scope.map,$scope.defaultLayers)```
**请检查imgs:**
实际:https://i.stack.imgur.com/Vu17g.jpg
预期:https://i.stack.imgur.com/Tcid8.jpg
参考文献:
请在下面添加库并尝试运行,同时共享代码中使用的库
<meta name="viewport" content="initial-scale=1.0,
width=device-width" />
<link rel="stylesheet" type="text/css" href="https://js.api.here.com/v3/3.1/mapsjs-ui.css" />
<script src="https://js.api.here.com/v3/3.1/mapsjs-core.js"
type="text/javascript" charset="utf-8"></script>
<script src="https://js.api.here.com/v3/3.1/mapsjs-core-legacy.js"
type="text/javascript" charset="utf-8"></script>
<script src="https://js.api.here.com/v3/3.1/mapsjs-service.js"
type="text/javascript" charset="utf-8"></script>
<script src="https://js.api.here.com/v3/3.1/mapsjs-service-legacy.js"
type="text/javascript" charset="utf-8"></script>
在缩放和中心旁边添加像素比率参数:
$scope.map = new H.Map(
document.getElementById("here-map-canvas"),
$scope.defaultLayers.raster.normal.map,
{
zoom: 12,
center: { lat: officeLat, lng: officeLng },
pixelRatio: window.devicePixelRatio || 1
}
);
并禁用行为上的分数缩放以及缩放控制UI(在v3.1中默认启用):
有关更多详细信息,请参阅地图选项文档:
ZoomControl选项:
和要在行为上禁用的功能:Hi,响应的thx。我已经有了这些链接,但它不起作用。我使用了一些库来描述。没有帮助,我以前试过这个。此问题发生在更新到3.1库后。如果在一些缩放操作后瓷砖变得模糊,则问题很可能是版本3.1中引入的分数缩放。我更新了答案并添加了禁用分数缩放功能。这应该会有帮助。谢谢你。它有助于缩放,但图像仍然不清晰。您能否再次提供屏幕截图和代码示例?或者更好的JSFIDLE链接,这样我就可以自己测试了?
behavior.disable(H.mapevents.Behavior.Feature.FRACTIONAL_ZOOM);
$scope.ui.removeControl('zoom');
$scope.ui.addControl('zoom', new H.ui.ZoomControl({
fractionalZoom: false,
alignment: H.ui.LayoutAlignment.RIGHT_BOTTOM
}));