一:申请高德地图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] }); } }
四:效果图:
扫描二维码关注公众号,回复:
2482673 查看本文章