map

src/app/routes/supply-management/components/gaode-map/gaode-map.component.ts

@@ -4,6 +4,7 @@ import { load } from '@amap/amap-jsapi-loader';
 import { BaseService } from 'src/app/shared/services';
 import { throwError } from 'rxjs';
 import AMapLoader from '@amap/amap-jsapi-loader';
+declare var AMapUI: any;
 @Component({
   selector: 'app-gaode-map',
   templateUrl: './gaode-map.component.html'
@@ -25,12 +26,15 @@ export class GaodeMapComponent implements OnInit, OnDestroy {
   }
 
   mapInit() {
+    console.log(AMapLoader);
+
     AMapLoader.load({
       // 首次调用 load
       key: '63f9573ca55fef2b92d4ffe0c85dea8f', // 申请好的Web端开发者Key，首次调用 load 时必填
       version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
       plugins: [
         // 需要使用的的插件列表，如比例尺'AMap.Scale'等
+        'AMap.SimpleMarker',
         'AMap.Scale',
         'AMap.ToolBar',
         'AMap.MapType',
@@ -40,7 +44,7 @@ export class GaodeMapComponent implements OnInit, OnDestroy {
       AMapUI: {
         // 是否加载 AMapUI，缺省不加载
         version: '1.1', // AMapUI 缺省 1.1
-        plugins: [] // 需要加载的 AMapUI ui插件
+        plugins: ['overlay/SimpleMarker'] // 需要加载的 AMapUI ui插件
       },
       Loca: {
         // 是否加载 Loca， 缺省不加载
@@ -50,12 +54,21 @@ export class GaodeMapComponent implements OnInit, OnDestroy {
       .then(AMap => {
         console.log(AMap);
 
-        this.aMap = new AMap.Map('container', {
-          viewMode: '2D', // 默认使用 2D 模式，如果希望使用带有俯仰角的 3D 模式，请设置 viewMode: '3D',
-          zoom: 16
-        });
+        this.aMap = new AMap.Map('container');
+        console.log(this.aMap);
+
         this.aMap.on('complete', () => {
           this.service.msgSrv.info('地图加载完成 !');
+          new AMapUI.SimpleMarker({
+            //前景文字
+            iconLabel: 'A',
+            //图标主题
+            iconTheme: 'default',
+            //背景图标样式
+            iconStyle: 'red',
+            map: this.aMap,
+            position: this.aMap.getCenter()
+          });
         });
       })
       .catch(e => {