angular 6引入高德地图

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

二:inde.html 里:

<script src="http://webapi.amap.com/maps?v=1.4.3&key=填入你申请的key">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]
    });
  }
}

四:效果图:

angular 6引入高德地图_第1张图片



你可能感兴趣的:(地图)