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
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容