在这里，在Safari和iOS上无法正确加载Java API-Map Layer [英] HERE Javascript API - Map layer doesn't load properly on Safari and iOS
本文介绍了在这里，在Safari和iOS上无法正确加载Java API-Map Layer的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在为iOS创建一个FileMaker Go解决方案，在这个解决方案中，我使用了一个Web查看器，该查看器通过使用HERE Java API显示带有一些标记的地图。 当我在Mac OS X上使用该解决方案时，一切都很好，我看到了地图和标记，我可以点击它们，它会像预期的那样打开地图应用程序。 但在iOS上，地图仍然是灰色的，似乎没有加载，但我可以看到标记并点击它们。 此外，当我查看Here API开发者网站上的示例时，我注意到在Mac OS X上的Safari上也有同样的行为，但在Chrome或Firefox上一切都正常运行，以下是其中一个示例：
https://developer.here.com/documentation/examples/maps-js/markers/markers-on-the-map
有谁有主意吗？
下面是我使用的html/javascript代码：
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
<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>
<script src="https://js.api.here.com/v3/3.1/mapsjs-mapevents.js" type="text/javascript" charset="utf-8"></script>
<script src="https://js.api.here.com/v3/3.1/mapsjs-ui.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="https://js.api.here.com/v3/3.1/mapsjs-ui.css" />
</head>
<body style="position: relative" >
<div id="mapContainer" style="position: fixed ; top: 0 ; bottom: 0 ; left : 0 ; right : 0 ; background: grey" />
<script type="text/javascript" charset="UTF-8" >
/* DATA RECEIVED FROM FILEMAKER */
/* JSON array with full addresses */
var jsonInterventions = [{"estExecutee":0,"idIntervention":"E1630517-3EFF-DD4F-981F-A6E703BB8798","jsonattributes":1,"lat":48.81266,"lng":2.42228,"ordre":1},{"estExecutee":0,"idIntervention":"22E00113-A7F6-4DC7-95FB-252AB0A1E028","jsonattributes":1,"lat":48.721023,"lng":2.538195,"ordre":1}] ;
/* Total number of addresses */
var totalInterventions = 2 ;
/* Additional info on the FileMaker file in order to use the FMP protocol */
var AdresseServeur = '$' ;
var NomFichier = 'Mosaïc' ;
var ApiKey = 'XXXXXX';
/* FUNCTIONS */
function GetSVGMarkup(color,colorfont,ordre){
return '<svg height="32" width="32" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" aria-labelledby="title" aria-describedby="desc" role="img" xmlns:xlink="http://www.w3.org/1999/xlink">'+
'<path data-name="layer1" d="M32 62c0-17.1 16.3-25.2 17.8-39.7A18 18 0 1 0 14 20a17.7 17.7 0 0 0 .2 2.2C15.7 36.8 32 44.9 32 62z" fill="' + color + '"></path>'+
'<text x="32" y="32" font-size="20pt" ' + 'font-family="Arial" font-weight="bold" text-anchor="middle" ' + 'fill="'+ colorfont +'">'+ ordre +'</text>'+
'</svg>';
}
/* Display markers on the map */
function AffichageMarqueurs(platform) {
/* For each address */
for(var i=0 ; i<totalInterventions ; i++){
var color = jsonInterventions[i].estExecutee ? "#AAAAAA" : "#1b468d",
colorfont = jsonInterventions[i].estExecutee ? "black" : "white",
ordre = jsonInterventions[i].ordre,
svgMarkup = GetSVGMarkup(color,colorfont,ordre),
icon = new H.map.Icon(svgMarkup);
/* Creation of a marker used the sent coordinates */
marker = new H.map.Marker(jsonInterventions[i], {icon: icon});
groupePoints.addObject(marker);
marker.setZIndex(i);
/* We keep the address ID for later */
var idIntervention = jsonInterventions[i].idIntervention ;
marker.setData(idIntervention);
/* Marker added to the map */
map.addObject(groupePoints);
map.getViewModel().setLookAtData({bounds: groupePoints.getBoundingBox()});
}
}
function CasErreur(error) {
/* nothing */
}
// Initialize the platform object:
var platform = new H.service.Platform({
'apikey': ApiKey,
useHTTPS: true
});
// Get the default map types from the Platform object:
//var defaultLayers = platform.createDefaultLayers();
/* Creation of the layer seen by default */
var pixelRatio = window.devicePixelRatio || 1;
var defaultLayers = platform.createDefaultLayers({
tileSize: pixelRatio === 1 ? 256 : 512,
ppi: pixelRatio === 1 ? undefined : 320
});
// Instantiate the map:
var map = new H.Map(
document.getElementById('mapContainer'),
defaultLayers.vector.normal.map,
{
zoom: 4,
center: { lng: 5, lat: 50 },
pixelRatio
});
// Enable the event system on the map instance:
var mapEvents = new H.mapevents.MapEvents(map);
// Add event listeners:
map.addEventListener('tap', function(evt) {
// Log 'tap' and 'mouse' events:
console.log(evt.type, evt.currentPointer.type);
});
// Instantiate the default behavior, providing the mapEvents object:
var behavior = new H.mapevents.Behavior(mapEvents);
// Create the default UI:
var ui = H.ui.UI.createDefault(map, defaultLayers,'fr-FR');
/* Setting of a groupe of points (group of addresses) */
var groupePoints = new H.map.Group()
/* display list of addresses on the map */
AffichageMarqueurs(platform);
/* Center the map in order to see all the points displayed */
map.getViewModel().setLookAtData({bounds: groupePoints.getBoundingBox()});
/* If the user clicks on a marker */
groupePoints.addEventListener('tap', function (evt) {
/* Open in Filemaker a FM card model with additional info on the clicked address */
var lienFmp = "fmp://" + AdresseServeur + "/" + NomFichier + "?script=FMP - Open GPSAPP onClick"+
"&$idIntervention=" + evt.target.getData() ;
window.open(lienFmp, "_blank");
}, false);
</script>
</body>
</html>
编辑2020-07-17：
以下是Safari Web检查器的屏幕截图，显示了一些错误(我调试的页面来自上面的链接：
推荐答案
可能有两个原因导致此错误。
这可能是因为在加载所有HERE库/脚本之前调用了某些函数。因此，在实例化地图对象和调用地图函数之前，请确保HERE外部脚本已完全加载并且窗口对象可用。
您无法加载任何其他坐标的磁贴还是APP_KEYS错误。链接可能断开，这也可能是磁贴未加载的原因。
这篇关于在这里，在Safari和iOS上无法正确加载Java API-Map Layer的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
