堆栈内存溢出
  繁体   English   中英

如何为HERE Javascript API设置HERE Base Map Tiles API？

[英]How to setup HERE Base Map Tiles API for HERE Javascript API?

 原文  2019-07-23 18:02:11  8   2    javascript/ here-api

问题描述

我为我的Web应用程序成功实现了HERE Javascript API。 我想简化地图的显示方式，因此首先尝试创建本指南中介绍的自己的地图样式。

给出的示例可以正常工作，但我无法根据需要进行调整而不会出现故障（我认为缩进是问题所在，尽管经过数小时的尝试，但仍无法验证）。 我找不到任何“地图样式文件生成器”，所以我几乎放弃了，直到找到这些：

不幸的是，这些答案中的给定代码不起作用： 

//Instead of using the default layers...
//var defaultLayers = platform.createDefaultLayers();

//...create your own layer (with e.g. the "reduced" scheme
var reduced = platform.getMapTileService({
  type: 'base'
}).createTileLayer("maptile", "reduced.day", 256, "png8");

//Initialize a map using your custom map tile layer
var map = new H.Map(document.getElementById('mapp'), reduced, {
  center: {
    lat: 52.3,
    lng: 13.8
  },
  zoom: 10
});

而defaultLayers.vector.normal.map和reduced对象似乎是同一类对象，使用defaultLayers为我提供默认映射，而使用简化的Layout为我提供一个空白映射，控制台上没有错误，但那些GET类型为Errors ： 

mapsjs-core.js:33 GET https://1.base.hereapi.com/maptile/2.1/info?xnlp=CL_JSMv3.1.0.3&apikey=[My credentials]&output=json net::ERR_NAME_NOT_RESOLVED
d   @   mapsjs-core.js:33
ic  @   mapsjs-core.js:34
application/json    @   mapsjs-core.js:70
af.yj   @   mapsjs-core.js:69
(anonymous) @   mapsjs-core.js:44
(anonymous) @   mapsjs-core.js:44
zj  @   mapsjs-core.js:44
add @   mapsjs-core.js:44
rd  @   mapsjs-core.js:43
af  @   mapsjs-core.js:69
n.ga    @   VM2398:15
n.hh    @   VM2398:18
tn  @   VM2398:14
T.vb    @   VM2398:14
T.th    @   VM2398:20
(anonymous) @   script.js:60

以下是我完整的代码： 

///### Credentials

// Identification service, this key only work on present domain.
var platform = new H.service.Platform({
    'apikey': '[Well .. my credentials]'
});

///### Map setup

//...create your own layer (with e.g. the "reduced" scheme
var reduced = platform.getMapTileService({
  type: 'base'
}).createTileLayer("maptile", "reduced.day", 256, "png8");

//Step 2: initialize a map using your custom map tile layer
var map = new H.Map(document.getElementById('map'), reduced, {
  center: {
    lat: 52.3,
    lng: 13.8
  },
  zoom: 10
});

///### Map Interaction

// Add a resize listener to make sure that the map occupies the whole container
window.addEventListener('resize', () => map.getViewPort().resize());

// Set the map interactive
// Behavior implements default interactions for pan/zoom (also on mobile touch environments)
var behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map));

// Create the default UI:
var ui = H.ui.UI.createDefault(map, defaultLayers ,'es-ES');

也许获取地图图块的声明已更改？

2 个解决方案

解决方案1
 0  2019-07-24 03:49:17

我只是使您的源代码起作用。 希望有帮助！ 

<!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-service.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>
  <div style="width: 640px; height: 480px" id="mapContainer"></div>
<script type="text/javascript" charset="utf-8">
var style = `
sources:
  omv:
    type: OMV
    max_zoom: 17
    min_display_zoom: 1
scene:
  background:
    color: [1.000, 1.000, 1.000, 1.00]

layers:
  water_areas:
    data: {source: omv, layer: water}
    draw:
      polygons:
        order: 1 # z-order of the layer
        color: [0.055, 0.604, 0.914, 1.00]
  road:
    data: {source: omv, layer: roads}
    draw:
      lines:
        order: 2
        color: [0.561, 0.561, 0.561, 1.00]
        width: 15
    major_road:
      filter:
        kind: 'major_road'
      draw:
        lines:
          color: [0.882, 0.553, 0.086, 1.00]
          width: 5px
`;
  //Initialize the Platform object:
    var platform = new H.service.Platform({
    'apikey': 'APIKEY'
    });

  // Get the default map types from the Platform object:
  var defaultLayers = platform.createDefaultLayers();

  // Instantiate the map:
  var map = new H.Map(
    document.getElementById('mapContainer'),
    defaultLayers.vector.normal.map,
    {
      zoom: 10,
      center: { lng: 13.8, lat: 52.3 }
    });

  var baseLayer = map.getBaseLayer();
  baseLayer.getProvider().setStyle(new H.map.Style(style));

</script>
</body>
</html>

解决方案2
 0 已采纳  2019-07-24 05:36:02

您应该使用js版本3.0而不是3.1来使代码正常工作，这样对您有用吗？ 

<!DOCTYPE html>
<html>
<head>
<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.0/mapsjs-ui.css?dp-version=1533195059" />
<script type="text/javascript" src="https://js.api.here.com/v3/3.0/mapsjs-core.js"></script>
<script type="text/javascript" src="https://js.api.here.com/v3/3.0/mapsjs-service.js"></script>
<script type="text/javascript" src="https://js.api.here.com/v3/3.0/mapsjs-ui.js"></script>
<script type="text/javascript" src="https://js.api.here.com/v3/3.0/mapsjs-mapevents.js"></script>

</head>
<body>

  <div id="map" style="position:absolute; width:100%; height:100%; background:grey" ></div>
  <!--<div id="panel" style="position:absolute; width:49%; left:51%; height:100%; background:inherit" ></div>-->

  <script  type="text/javascript" charset="UTF-8" >


//Step 1: initialize communication with the platform
var platform = new H.service.Platform({
  app_id: 'DemoAppId01082013GAL',
  app_code: 'AJKnXv84fjrb0KIHawS0Tg',
  useCIT: true
});

//Instead of using the default layers...
//var defaultLayers = platform.createDefaultLayers();

//...create your own layer (with e.g. the "reduced" scheme
var reduced = platform.getMapTileService({
  type: 'base'
}).createTileLayer("maptile", "reduced.day", 256, "png8");

//Step 2: initialize a map using your custom map tile layer
var map = new H.Map(document.getElementById('map'), reduced, {
  center: {
    lat: 52.3,
    lng: 13.8
  },
  zoom: 10
});

//Step 3: make the map interactive
var behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map));

  </script>
</body>
</html>

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 适用于此地图的JavaScript的Maps API 这里 API - 删除地图 这里映射Javascript API转弯导航 HERE Map Javascript Api 给出了 InvalidArgumentError 使用 Here Maps JavaScript API 旋转地图 Here Maps api：如何让当前中心显示在 map (JavaScript) 如何删除 HERE map API 的 map 路由 HERE 地图 Javascript API 如何使用此处api添加地球坐标地图以形成表单 这里是 JavaScript API 的地图：如何计算路线？
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM