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; } } }
效果图: