angualr6高德地图UI的使用

1.index.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>

2.html:

 

<div id='container' ></div>

3.ts

 

import { Component, OnInit } from '@angular/core';
declare var AMap: any;
declare var AMapUI: any;
let map:any;
@Component({
  selector: 'map',
  templateUrl: './map.component.html',
  styleUrls: ['./map.component.css']
})
export class MapComponent implements OnInit {
  constructor() { }
  ngOnInit() {
    this.getMap ();
    this. maker();
  }
  // 基本地图使用
  getMap() {
   map =  new AMap.Map('container', {
     zoom: 4
   });
    // 地图控件
    AMap.plugin(['AMap.ToolBar'], function() {
      map.addControl(new AMap.ToolBar({
        map: map
      }));
    });
  }
  // 地图UI的使用
 maker(){
   AMapUI.loadUI(['overlay/SimpleMarker'], function(SimpleMarker) {

    let lngLats = getGridLngLats(map.getCenter(), 4, 4,0,0);

     new SimpleMarker({
       //普通文本
       iconLabel: 'A',

       map: map,
       position: lngLats[0]
     });

     new SimpleMarker({

       containerClassNames: 'my-marker',
       //普通文本
       iconLabel: 'BC',

       iconStyle: 'green',

       map: map,
       position: lngLats[1]
     });

     new SimpleMarker({

       //设置节点属性
       iconLabel: {
         //普通文本
         innerHTML: '热',
         //设置样式
         style: {
           color: '#fff',
           fontSize: '120%',
           marginTop: '2px'
         }
       },

       iconStyle: 'red',
       map: map,
       position: lngLats[2]
     });

     new SimpleMarker({
       iconLabel: {
         //html
         innerHTML: '<div class="my-blue-point"><img src="//webapi.amap.com/theme/v1.3/hotNew.png"/></div>',
       },
       iconStyle: 'black',
       map: map,
       position: lngLats[3]
     });
   });
   function getGridLngLats(center, colNum, size, cellX, cellY) {

     let pxCenter = map.lnglatToPixel(center);

     let rowNum = Math.ceil(size / colNum);

     let startX = pxCenter.getX(),
       startY = pxCenter.getY();

     cellX = cellX || 70;

     cellY = cellY || 70;


     let lngLats = [];

     for ( let r = 0; r < rowNum; r++) {

       for ( let c = 0; c < colNum; c++) {

         let x = startX + (c - (colNum - 1) / 2) * (cellX);

         let y = startY + (r - (rowNum - 1) / 2) * (cellY);

         lngLats.push(map.pixelToLngLat(new AMap.Pixel(x, y)));

         if (lngLats.length >= size) {
           break;
         }
       }
     }
     return lngLats;
   }
 }

}

效果图：