代码之家 › 专栏 › 技术社区 › Kishan Oza

这里是CORS问题地图

heremaps ionic-framework angular

0

Kishan Oza · 技术社区 · 6 年前

https://developer.here.com/blog/display-an-interactive-here-map-in-an-ionic-framework-application

我已经在这里创建了一个帐户,并从那里获得javascrio APPID和APIKEY,并在我的代码中使用,就像这样。。

home.page.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));
    }

}

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

但是,当我在浏览器上运行项目时,出现了一个错误。。

0 回复 | 直到 6 年前

1

Tomas 6 年前

您共享的博客文章使用了较旧版本的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' }
    }
);

Here 您可以在这里找到JavaScript API映射的实时示例。