Angular集成高德地图

旧版api

import { Directive, ElementRef, OnInit, Output, EventEmitter, Input } from '@angular/core';
import { environment } from 'src/environments/environment';
import { NzMessageService } from 'ng-zorro-antd';

@Directive({
  selector: '[appGaodeOldMap]'
})
export class GaodeOldDirective implements OnInit {
  map: any;
  constructor(private host: ElementRef, private message: NzMessageService) {
    if (!document.getElementById('amap')) {
      const script = document.createElement('script');
      script.setAttribute('id', 'amap');
      window['init'] = () => {
        const AMap = window['AMap'];
        this.loadBaseMap(AMap);
        this.mapLoad.emit({AMap: AMap, map: this.map});
      };
      script.src = `https://webapi.amap.com/maps?` +
      `v=1.4.15&key=${environment.ak}&callback=init&plugin=AMap.Scale,AMap.Geocoder,AMap.Autocomplete,AMap.PlaceSearch`;
      document.body.appendChild(script);
    }
  }
  @Output() mapLoad = new EventEmitter();

  ngOnInit() {
    if (document.getElementById('amap')) {
      const AMap = window['AMap'];
      if (!AMap) {
        return;
      }
      this.loadBaseMap(AMap);
      this.mapLoad.emit({AMap: AMap, map: this.map});
    }
  }

  // 加载地图
  loadBaseMap(AMap) {
    this.map = new AMap.Map(this.host.nativeElement);
    if (this._center) {
      this.map.setCenter(this._center);
    }
    if (this._zoom !== undefined && this._zoom !== null) {
      this.map.setZoom(this._zoom);
    }
  }

}

新版api

import { environment } from 'src/environments/environment';
import { NzMessageService } from 'ng-zorro-antd';
declare var AMapLoader: any;

@Directive({
  selector: '[appGaodeMap]'
})
export class GaodeDirective implements OnInit {
  AMap: any;
  map: any;
  constructor(private host: ElementRef, private message: NzMessageService) {
    if (!document.getElementById('amapLoader')) {
      const script = document.createElement('script');
      script.setAttribute('id', 'amapLoader');
      script.src = `https://webapi.amap.com/loader.js`;
      script.onload = () => {
        this.apiLoad();
      };
      document.body.appendChild(script);
    } 
  }

  @Output() mapLoad = new EventEmitter();

  ngOnInit() {
    if (document.getElementById('amapLoader')) {
      this.apiLoad();
    }
  }

  apiLoad() {
    AMapLoader.load({
      key: environment.ak,
      version: '2.0',
      plugins: ['AMap.Scale', 'AMap.Geocoder', 'AMap.AutoComplete', 'AMap.PlaceSearch']
    }).then((AMap) => {
      this.AMap = AMap;
      this.loadBaseMap();
      this.mapLoad.emit({AMap: this.AMap, map: this.map});
    }).catch(e => {
      console.log(e);
    });
  }

  // 加载地图
  loadBaseMap() {
    console.log(this.AMap);
    this.map = new this.AMap.Map(this.host.nativeElement);
    if (this._center) {
      console.log('set center');
      this.map.setCenter(this._center);
    }
    if (this._zoom !== undefined && this._zoom !== null) {
      console.log('set zoom');
      this.map.setZoom(this._zoom);
    }
  }

}