寻求Angular 4集成HERE-API方案：无适配模块仅JS SDK难集成

Absolutely! I’ve helped several developers get the HERE JS SDK working smoothly in Angular 4, and it’s totally doable with a few straightforward steps. Let me walk you through the process:

First, you’ll need to include the HERE SDK scripts directly in your index.html file. This ensures the SDK is available globally before your Angular app initializes:

<!-- Add these to the <head> section of src/index.html -->
<script src="https://js.api.here.com/v3/3.1/mapsjs-core.js"></script>
<script src="https://js.api.here.com/v3/3.1/mapsjs-service.js"></script>
<script src="https://js.api.here.com/v3/3.1/mapsjs-mapevents.js"></script>

You can add additional modules (like mapsjs-ui.js for UI controls) based on your needs.

Since Angular 4 uses TypeScript, it’ll throw errors about the missing H global variable (the HERE SDK’s main namespace). To fix this:

1. Create a typings.d.ts file in your src folder (if it doesn’t exist already)
2. Add this declaration to the file:

declare var H: any;

This tells TypeScript to recognize H as a valid global object.

Now you can use the SDK directly in any component. Here’s a full example of a map component:

Component Template (here-map.component.html) #

<!-- A container for the map; set explicit width/height -->
<div #mapContainer style="width: 100%; height: 500px;"></div>

Component Class (here-map.component.ts) #

import { Component, ViewChild, AfterViewInit } from '@angular/core';

@Component({
  selector: 'app-here-map',
  templateUrl: './here-map.component.html',
  styleUrls: ['./here-map.component.css']
})
export class HereMapComponent implements AfterViewInit {
  @ViewChild('mapContainer') mapContainer: any;
  private map: any;

  ngAfterViewInit() {
    // Initialize the HERE platform with your API key
    const platform = new H.service.Platform({
      apikey: 'YOUR_HERE_API_KEY' // Replace with your actual key
    });

    // Get default map layers
    const defaultLayers = platform.createDefaultLayers();

    // Create the map instance
    this.map = new H.Map(
      this.mapContainer.nativeElement,
      defaultLayers.vector.normal.map,
      {
        center: { lat: 40.7128, lng: -74.0060 }, // New York coordinates (example)
        zoom: 12,
        pixelRatio: window.devicePixelRatio || 1
      }
    );

    // Add map interactions (drag, zoom)
    const behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(this.map));

    // Add default UI controls (zoom buttons, etc.)
    const ui = H.ui.UI.createDefault(this.map, defaultLayers);
  }
}

Key note: Use ngAfterViewInit instead of ngOnInit to ensure the map container DOM element is fully rendered before initializing the map.

• CORS Errors: Make sure your Angular app’s domain (e.g., http://localhost:4200 for development) is added to the allowed origins in your HERE Developer Portal project settings.
• Script Loading Issues: If the SDK isn’t loading properly, move the script tags to just before the closing </body> tag in index.html to ensure DOM is ready first.
• Production Builds: The HERE SDK scripts won’t be bundled into your Angular build, so ensure your production server allows access to the HERE CDN, or download the SDK files and host them locally in your assets folder.

Many developers have successfully used this approach to integrate HERE API into Angular 4 apps. If you hit a specific error, feel free to share details for more targeted help!

内容的提问来源于stack exchange，提问作者octal akshay