angular7引入高德地图

一、注册账号并申请Key
1. 首先，注册开发者账号，成为高德开放平台开发者

2. 登陆之后，在进入「应用管理」 页面「创建新应用」

3. 为应用添加 Key」

二、引入

1. index.html中 引入

<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.13&key=您申请的key值"></script> 

2.在map.html中 引入

<div id="container"></div> 

3.要写上宽高的样式才可以

#container {width:100%; height: 600px; }  

4.在map.ts中 写入

declare var AMap: any

ngOnInit() {
    let map = new AMap.Map('container', {
      resizeEnable: true,
      zoom: 11,
      center: [116.397428, 39.90923]
    })
}

效果如图:

image.png