0

嗨，我正在尝试在我的离子应用程序中使用 HERE 地图。我关注了这个博客 https://developer.here.com/blog/display-an-interactive-here-map-in-an-ionic-framework-application

我已经创建了 HERE 帐户并从那里获取 javascrio APPID 和 APIKEY 并在我的代码中使用，就像这样..

主页.ts

import { Component, ViewChild, ElementRef } from '@angular/core';
declare var H: any;

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {

  @ViewChild("map", {static: false})
    public mapElement: ElementRef;

    public constructor() { }

    public ngOnInit() { }

    public ngAfterViewInit() {
        let platform = new H.service.Platform({
            "app_id": 'XXXXXXX',
            "app_code": 'XXXXXXX' 
        });
        let defaultLayers = platform.createDefaultLayers();
        let map = new H.Map(
            this.mapElement.nativeElement,
            defaultLayers.normal.map,
            {
                zoom: 10,
                center: { lat: '22.258651999999998', lng: '71.1923805' }
            }
        );
        let behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map));
    }

}

我的主页.html

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>
      Blank
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
  <ion-header collapse="condense">
    <ion-toolbar>
      <ion-title size="large">Blank</ion-title>
    </ion-toolbar>
  </ion-header>

  <div id="container">
    <div #map style="width: 100%; height: 100%"></div>

  </div>
</ion-content>

但是当我在浏览器上运行项目时出现错误..

在此处输入图像描述

4

1 回答 1

1

您分享的博文使用的是旧版本的 HERE Javascript API (3.0)。您可以尝试使用最新版本 3.1 吗？

只需替换https://js.api.here.com/v3/3.0/..为https://js.api.here.com/v3/3.1/..

同样对于 3.1 版本，您应该使用apikey而不是app_id，app_code并且 defaultLayers 结构也发生了一些变化：

let platform = new H.service.Platform({
    apikey: 'XXXXXXX'
});
let defaultLayers = platform.createDefaultLayers();
let map = new H.Map(
    this.mapElement.nativeElement,
    defaultLayers.vector.normal.map,
    {
        zoom: 10,
        center: { lat: '22.258651999999998', lng: '71.1923805' }
    }
);

在这里，您可以找到适用于 JavaScript API 的 HERE 地图的实时示例。

于 2020-04-23T07:02:47.850 回答