map component

src/app/shared/components/amap/amap-poi-picker/amap-poi-picker.component.ts

@@ -1,9 +1,12 @@
 import { Component, OnInit, ViewChild } from '@angular/core';
-import { BaseService } from 'src/app/shared/services';
 import { throwError } from 'rxjs';
 import AMapLoader from '@amap/amap-jsapi-loader';
+import { amapConf } from '@conf/amap.config';
 declare var AMap: any;
 declare var AMapUI: any;
+declare var Loca: any;
+
+const CONFIG = amapConf;
 
 @Component({
   selector: 'amap-poi-picker',
@@ -16,7 +19,10 @@ export class AmapPoiPickerComponent implements OnInit {
   addressInput: any;
 
   aMap: any;
-  constructor(private service: BaseService) {}
+
+  poi: any;
+
+  constructor() {}
   ngOnInit(): void {
     this.mapInit();
     // this.PoiPicker();
@@ -29,63 +35,43 @@ export class AmapPoiPickerComponent implements OnInit {
   }
 
   mapInit() {
-    console.log(AMapLoader);
-
     AMapLoader.load({
       // 首次调用 load
-      key: '63f9573ca55fef2b92d4ffe0c85dea8f', // 申请好的Web端开发者Key，首次调用 load 时必填
-      version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
+      key: CONFIG.key, // 申请好的Web端开发者Key，首次调用 load 时必填
+      version: CONFIG.version, // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
       plugins: [
         // 需要使用的的插件列表，如比例尺'AMap.Scale'等
         'AMap.SimpleMarker',
         'AMap.PoiPicker',
         'AMap.Scale',
-        'AMap.Marker',
         'AMap.InfoWindow',
-        'AMap.ToolBar',
-        'AMap.MapType',
-        'AMap.Driving',
         'AMap.Geolocation'
       ],
       AMapUI: {
         // 是否加载 AMapUI，缺省不加载
-        version: '1.1', // AMapUI 缺省 1.1
+        version: CONFIG.AMapUIVersion, // AMapUI 缺省 1.1
         plugins: ['overlay/SimpleMarker', 'misc/PoiPicker'] // 需要加载的 AMapUI ui插件
       },
       Loca: {
         // 是否加载 Loca， 缺省不加载
-        version: '2.0' // Loca 版本，缺省 1.3.2
+        version: CONFIG.LocaVersion // Loca 版本，缺省 1.3.2
       }
     })
       .then(AMap => {
-        console.log(AMap);
-
+        // 搜索picker
         var poiPicker = new AMapUI.PoiPicker({
-          //city:'北京',
           input: 'pickerInput'
         });
 
-        console.log(poiPicker);
-
+        // 地图
         this.aMap = new AMap.Map('container', {
           resizeEnable: true,
           zoom: 16
         });
-        console.log(this.aMap);
 
+        // 地图创建成功
         this.aMap.on('complete', () => {
-          this.service.msgSrv.info('地图加载完成 !');
           this.poiPickerReady(poiPicker);
-          // new AMapUI.SimpleMarker({
-          //   //前景文字
-          //   iconLabel: 'A',
-          //   //图标主题
-          //   iconTheme: 'default',
-          //   //背景图标样式
-          //   iconStyle: 'red',
-          //   map: this.aMap,
-          //   position: this.aMap.getCenter()
-          // });
         });
       })
       .catch(e => {
@@ -96,28 +82,25 @@ export class AmapPoiPickerComponent implements OnInit {
   poiPickerReady(poiPicker: any) {
     (window as any).poiPicker = poiPicker;
     const map = this.aMap;
-    const _this = this;
-    var marker = new AMapUI.SimpleMarker();
-    console.log(marker);
+    // 定位标志
+    const marker = new AMapUI.SimpleMarker({
+      //图标主题
+      iconTheme: 'default',
+      map: map,
+      position: map.getCenter()
+    });
 
-    var infoWindow = new AMap.InfoWindow({
+    // 信息窗口
+    const infoWindow = new AMap.InfoWindow({
       offset: new AMap.Pixel(0, -20)
     });
-    console.log(infoWindow);
 
     //选取了某个POI
-    poiPicker.on('poiPicked', function (poiResult: any) {
-      var source = poiResult.source,
-        poi = poiResult.item,
-        info = {
-          source: source,
-          id: poi.id,
-          name: poi.name,
-          location: poi.location.toString(),
-          address: poi.address
-        };
+    poiPicker.on('poiPicked', (poiResult: any) => {
+      const source = poiResult.source,
+        poi = poiResult.item;
       console.log(poi);
-
+      this.poi = poi;
       marker.setMap(map);
       infoWindow.setMap(map);
 
@@ -135,45 +118,6 @@ export class AmapPoiPickerComponent implements OnInit {
     });
   }
 
-  createInfoWindow(title: any, content: any) {
-    var info = document.createElement('div');
-    info.className = 'custom-info input-card content-window-card';
-
-    //可以通过下面的方式修改自定义窗体的宽高
-    //info.style.width = "400px";
-    // 定义顶部标题
-    var top = document.createElement('div');
-    var titleD = document.createElement('div');
-    var closeX = document.createElement('img');
-    top.className = 'info-top';
-    titleD.innerHTML = title;
-    closeX.src = 'https://webapi.amap.com/images/close2.gif';
-    closeX.onclick = this.closeInfoWindow;
-
-    top.appendChild(titleD);
-    top.appendChild(closeX);
-    info.appendChild(top);
-
-    // 定义中部内容
-    var middle = document.createElement('div');
-    middle.className = 'info-middle';
-    middle.style.backgroundColor = 'white';
-    middle.innerHTML = content;
-    info.appendChild(middle);
-
-    // 定义底部内容
-    var bottom = document.createElement('div');
-    bottom.className = 'info-bottom';
-    bottom.style.position = 'relative';
-    bottom.style.top = '0px';
-    bottom.style.margin = '0 auto';
-    var sharp = document.createElement('img');
-    sharp.src = 'https://webapi.amap.com/images/sharp.png';
-    bottom.appendChild(sharp);
-    info.appendChild(bottom);
-    return info;
-  }
-
   closeInfoWindow() {
     this.aMap.clearInfoWindow();
   }