堆栈内存溢出
  简体   繁体   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  1   2    javascript/ here-api

问题描述

I am succesfully implementing the HERE Javascript API for my web app. 我为我的Web应用程序成功实现了HERE Javascript API。 I wanted to lighten the map presentation, so I first tried to create my own map style as presented on this guide . 我想简化地图的显示方式，因此首先尝试创建本指南中介绍的自己的地图样式。

The examples given work fine but I could not tune it as I wish without malfunctioning (I guess indentation is the problem but I could not verify it despite hours of trying). 给出的示例可以正常工作，但我无法根据需要进行调整而不会出现故障（我认为缩进是问题所在，尽管经过数小时的尝试，但仍无法验证）。 I could not find any "Map styling file generator" so I almost gave up until I found these: 我找不到任何“地图样式文件生成器”，所以我几乎放弃了，直到找到这些：

Unfortunately, the given code in these answers does not work: 不幸的是，这些答案中的给定代码不起作用： 

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

whereas the defaultLayers.vector.normal.map and the reduced objects seems to be the same kind of objects, using the defaultLayers get me the default map and using the reduced Layout just get me a blank map without errors on console but those GET type Errors: 而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

Below is my complete code : 以下是我完整的代码： 

///### 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');

Maybe the statement for getting Map Tiles has changed? 也许获取地图图块的声明已更改？

2 个解决方案

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

I just made your source code worked. 我只是使您的源代码起作用。 Hope this help! 希望有帮助！ 

<!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

You should use js version 3.0 to make your code worked instead of 3.1 Does this work for you? 您应该使用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 - Maps API for JavaScript in HERE MAP 这里 API - 删除地图 - Here API - Remove Map 这里映射Javascript API转弯导航 - Here Map Javascript API turn by turn navigation HERE Map Javascript Api 给出了 InvalidArgumentError - HERE Map Javascript Api gives InvalidArgumentError 使用 Here Maps JavaScript API 旋转地图 - Rotate map with Here Maps JavaScript API Here Maps api：如何让当前中心显示在 map (JavaScript) - Here Maps api: how to get current center showing on the map (JavaScript) 如何删除 HERE map API 的 map 路由 - How to remove map route for HERE map API HERE 地图 Javascript API - HERE Maps Javascript API 如何使用此处api添加地球坐标地图以形成表单 - how to add geocordination map to form with here api 这里是 JavaScript API 的地图：如何计算路线？ - HERE maps for JavaScript API: How to calculate route?
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM