angular 6引入高德地图

一：申请高德地图key：     https://lbs.amap.com/dev/key/app

二：inde.html 里：

<!--引入高德地图JSAPI -->

<script src="http://webapi.amap.com/maps?v=1.4.3&key=填入你申请的key"></script>

<!--引入UI组件库（1.0版本） -->

<!--<script src="//webapi.amap.com/ui/1.0/main.js"></script>-->

三：在想要做地图的组件：

1.html:

<div id='container' style='width:800px; height:600px;'></div>

2.ts:

import { Component, OnInit } from '@angular/core';
declare var  AMap: any;    // 一定要声明AMap，要不然报错找不到AMap
@Component({
  selector: 'map',
  templateUrl: './map.component.html',
  styleUrls: ['./map.component.css']
})
export class MapComponent implements OnInit {

  constructor() { }

  ngOnInit() {
    this.getMap ();
  }

  // 地图要放到函数里。
  getMap(){
     let map = new AMap.Map('container', {
      resizeEnable: true,
      zoom:11,
      center: [116.397428, 39.90923]
    });
  }
}

四：效果图：