"update:地图组件更新样式"

app-angular/package-lock.json

@@ -9297,7 +9297,7 @@
     },
     "node_modules/parse": {
       "version": "4.2.0",
-      "resolved": "https://registry.npmmirror.com/parse/-/parse-4.2.0.tgz",
+      "resolved": "https://registry.npmjs.org/parse/-/parse-4.2.0.tgz",
       "integrity": "sha512-K8bWs0wM2qRhkSr6N16j8OvsF6Uallrynqng9e+tzR3RdKuB09vaJh48qrf9MbiJ1Ya4JZI7AfEHYF+ywEKs7Q==",
       "dependencies": {
         "@babel/runtime-corejs3": "7.21.0",

app-angular/src/modules/home/companydetail/companydetail.component.html

@@ -2,7 +2,16 @@
   <nz-descriptions-item nzTitle="公司名称">{{company.name}}</nz-descriptions-item>
   <nz-descriptions-item nzTitle="招聘岗位">{{company.post}}</nz-descriptions-item>
   <nz-descriptions-item nzTitle="薪资待遇">{{company.salary}}</nz-descriptions-item>
-  <nz-descriptions-item nzTitle="公司地址">{{company.address}} <a routerLink="/map/plan">地图查看</a>
+  <nz-descriptions-item nzTitle="公司地址">{{company.address}}
+    <button nz-button nzType="primary" (click)="open()">Open</button>
+    <nz-drawer [nzClosable]="false" [nzVisible]="visible" nzPlacement="right" nzTitle="Basic Drawer" [nzWidth]="1000"
+               (nzOnClose)="close()">
+      <ng-container *nzDrawerContent>
+        <div class="map-container">
+          <app-comp-plan-route></app-comp-plan-route>
+        </div>
+      </ng-container>
+    </nz-drawer>
   </nz-descriptions-item>
   <nz-descriptions-item nzTitle="公司信息" [nzSpan]="2">
     {{company.info}}

app-angular/src/modules/home/companydetail/companydetail.component.scss

@@ -0,0 +1,13 @@
+.map-container {
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+
+.map-container app-comp-plan-route {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+}

app-angular/src/modules/home/companydetail/companydetail.component.ts

@@ -14,6 +14,17 @@ Parse.initialize("dev")
 export class CompanydetailComponent {
   company: any = {}
 
+
+  visible: boolean = false;
+
+  open(): void {
+    this.visible = true;
+  }
+
+  close(): void {
+    this.visible = false;
+  }
+
   constructor(private route: ActivatedRoute) {
     this.route.queryParams.subscribe(params => {
       console.log(params["id"])

app-angular/src/modules/home/home.module.ts

@@ -42,6 +42,8 @@ import {ExperienceSquareUserComponent} from './experience-square-user/experience
 import {
   ExperienceSquareInformationComponent
 } from './experience-square-information/experience-square-information.component';
+import {MapModule} from "../map/map.module";
+import {NzDrawerModule} from "ng-zorro-antd/drawer";
 
 @NgModule({
   declarations: [
@@ -58,37 +60,39 @@ import {
     ExperienceSquareUserComponent,
     ExperienceSquareInformationComponent,
   ],
-  imports: [
-    CommonModule,
-    HomeRoutingModule,
-    NzListModule,
-    NzPopoverModule,
-    NzAvatarModule,
-    NzLayoutModule,
-    NzMenuModule,
-    NzIconModule,
-    IonicModule,
-    NzCarouselModule,
-    NzCardModule,
-    NzGridModule,
-    NzDescriptionsModule,
-    TooltipModule,
-    TabsModule,
-    NzBadgeModule,
-    NzInputModule,
-    NzSpinModule,
-    NzTabsModule,
-    NzModalModule,
-    NzButtonModule,
-    ReactiveFormsModule,
-    NzStepsModule,
-    FormsModule,
-    NzDividerModule,
-    NzTypographyModule,
-    NzCommentModule,
-    NzToolTipModule,
+    imports: [
+        CommonModule,
+        HomeRoutingModule,
+        NzListModule,
+        NzPopoverModule,
+        NzAvatarModule,
+        NzLayoutModule,
+        NzMenuModule,
+        NzIconModule,
+        IonicModule,
+        NzCarouselModule,
+        NzCardModule,
+        NzGridModule,
+        NzDescriptionsModule,
+        TooltipModule,
+        TabsModule,
+        NzBadgeModule,
+        NzInputModule,
+        NzSpinModule,
+        NzTabsModule,
+        NzModalModule,
+        NzButtonModule,
+        ReactiveFormsModule,
+        NzStepsModule,
+        FormsModule,
+        NzDividerModule,
+        NzTypographyModule,
+        NzCommentModule,
+        NzToolTipModule,
+        MapModule,
+        NzDrawerModule,
 
-  ]
+    ]
 })
 export class HomeModule {
 }

app-angular/src/modules/home/page-mine/page-mine.component.scss

@@ -185,13 +185,13 @@ button {
   background: lightgray;
 }
 
-
-.input-container {
+.segmented-container {
   display: flex;
-  align-items: center;
-  padding: 10px;
-  border-top: 1px solid #ccc;
-  justify-content: flex-end;
+  flex-direction: column;
+}
+
+.input-container, {
+  margin-top: 10px;
 }
 
 .input-container input {

app-angular/src/modules/map/comp-poi-picker/comp-poi-picker.component.scss

@@ -6,9 +6,9 @@
 #panel {
   position: absolute;
   background-color: white;
-  max-height: 90%;
+  max-height: 50%;
   overflow-y: auto;
-  top: 10px;
+  top: 12%;
   right: 10px;
-  width: 280px;
+  width: 45%;
 }

app-angular/src/modules/map/comp-poi-picker/comp-poi-picker.component.ts

@@ -1,9 +1,7 @@
 import {Component, Input, Output, EventEmitter, ViewChild, AfterViewInit} from '@angular/core';
 import * as Parse from "parse";
 // 弹窗依赖
-import {IonModal, ModalController} from '@ionic/angular';
-import {ComponentRef} from '@angular/core';
-
+import {IonModal} from '@ionic/angular';
 import {OverlayEventDetail} from '@ionic/core';
 
 // 高德依赖
@@ -19,9 +17,20 @@ import * as AMapLoader from "@amap/amap-jsapi-loader"
   styleUrls: ['./comp-poi-picker.component.scss']
 })
 export class CompPoiPickerComponent implements AfterViewInit {
+  @Input("name") _name: string // 地标名称
+  get name() {
+    return this._name
+  }
+
+  set name(v) {
+    this._name = v;
+    this.nameChange.emit(v)
+  }
 
+  @Output() nameChange: EventEmitter<string> = new EventEmitter()
 
-  @Input("address") _address?: string // 详细地址
+
+  @Input("address") _address: string // 详细地址
   get address() {
     return this._address
   }
@@ -33,7 +42,7 @@ export class CompPoiPickerComponent implements AfterViewInit {
 
   @Output() addressChange: EventEmitter<string> = new EventEmitter()
 
-  @Input("location") _location?: Parse.GeoPoint // 经纬度数组
+  @Input("location") _location!: Parse.GeoPoint // 经纬度数组
   get location() {
     return this._location
   }
@@ -45,23 +54,26 @@ export class CompPoiPickerComponent implements AfterViewInit {
 
   @Output() locationChange: EventEmitter<Parse.GeoPoint> = new EventEmitter()
 
-  constructor(private modalController: ModalController) {
+  constructor() {
+    this._name = '';
+    this._address = '';
+
   }
 
   /**
    * 弹窗效果区域
    */
   isModalOpen: boolean = false;
-  @ViewChild(IonModal, {static: false}) modal: IonModal | undefined;
+  @ViewChild(IonModal) modal!: IonModal;
 
   cancel() {
     this.isModalOpen = false;
-    this.modal?.dismiss(null, 'cancel');
+    this.modal.dismiss(null, 'cancel');
   }
 
   confirm() {
     this.isModalOpen = false;
-    this.modal?.dismiss(this.address, 'confirm');
+    this.modal.dismiss(this.address, 'confirm');
   }
 
   onWillDismiss(event: Event) {
@@ -73,7 +85,9 @@ export class CompPoiPickerComponent implements AfterViewInit {
 
   openModal() {
     this.isModalOpen = true
-    this.initMap()
+    setTimeout(() => {
+      this.initMap()
+    }, 500);
   }
 
   /**
@@ -82,10 +96,7 @@ export class CompPoiPickerComponent implements AfterViewInit {
   AMap: any;
   map: any;
 
-  async ngAfterViewInit() {
-    const modalElement = await this.modalController.getTop();
-    const componentProps = modalElement?.componentProps;
-    const modal = componentProps?.['modal'] as IonModal;
+  ngAfterViewInit(): void {
   }
 
   initMap() {
@@ -122,7 +133,7 @@ export class CompPoiPickerComponent implements AfterViewInit {
       this.map.addControl(geolocation);
 
       // 获取当前位置信息
-      geolocation.getCurrentPosition(<PositionCallback>function (status: any, result: any) {
+      geolocation.getCurrentPosition(function (status: string, result: any) {
         if (status === 'complete') {
           // 定位成功
           console.log('当前位置经度：' + result.position.getLng());
@@ -139,7 +150,7 @@ export class CompPoiPickerComponent implements AfterViewInit {
     this.AMap.plugin(["AMap.PlaceSearch"], () => {
       //构造地点查询类
       let placeSearch = new this.AMap.PlaceSearch({
-        pageSize: 5, // 单页显示结果条数
+        pageSize: 3, // 单页显示结果条数
         pageIndex: 1, // 页码
         // city: "010", // 兴趣点城市
         // citylimit: true,  //是否强制限制在设置的城市内搜索
@@ -150,10 +161,13 @@ export class CompPoiPickerComponent implements AfterViewInit {
       // 预设地点选择后事件
       placeSearch.on('selectChanged', (event: any) => {
         // 在这里处理选择的点的具体值
+        this.name = event.selected.data.name
+        this.address = event.selected.data.address
         this.location = new Parse.GeoPoint({
           latitude: event.selected.data.location.lat,
           longitude: event.selected.data.location.lng
         })
+        this.createCenterMarker();
       })
       // this.AMap.event.addListener(placeSearch, 'selectChanged', (event) => {
       //   // 在这里处理选择的点的具体值
@@ -164,4 +178,26 @@ export class CompPoiPickerComponent implements AfterViewInit {
       placeSearch.search(this.address);
     });
   }
+
+  centerMarker: any
+
+  createCenterMarker() {
+    if (this.centerMarker) {  // 避免多次创建
+      return
+    }
+    this.centerMarker = new this.AMap.Marker({
+      position: this.map.getCenter(), // Marker标记的初始位置为地图中心点
+      offset: new this.AMap.Pixel(-15, -15), // 设置Marker标记的偏移量，使其在地图中心显示
+      // content: '<div class="marker"></div>', // 自定义Marker标记的样式，可以是一个HTML元素
+      // map: this.map // 将Marker标记添加到地图上
+    });
+    this.map.add(this.centerMarker)
+    this.map.on('dragging', () => { // 地图拖动中：自动更新中央标点位置
+      this.centerMarker.setPosition(this.map.getCenter());
+    });
+    this.map.on('dragend', () => { // 拖动结束后：设置中央位置为经纬度
+      let pos = this.centerMarker.getPosition()
+      this.location = new Parse.GeoPoint({latitude: pos.lat, longitude: pos.lng})
+    });
+  }
 }

app-angular/src/modules/map/map.module.ts

@@ -6,7 +6,10 @@ import {CompPoiPickerModule} from './comp-poi-picker/comp-poi-picker.module';
 import {PageMapStartComponent} from "./page-map-start/page-map-start.component";
 import {CompRunOrderComponent} from "./comp-run-order/comp-run-order.component";
 import {PagePlanRouteComponent} from "./page-plan-route/page-plan-route.component";
-import { PagePlanInfoComponent } from './page-plan-info/page-plan-info.component';
+import {PagePlanInfoComponent} from './page-plan-info/page-plan-info.component';
+import {CompPlanRouteComponent} from './comp-plan-route/comp-plan-route.component';
+import {NzTabsModule} from "ng-zorro-antd/tabs";
+import {NzSegmentedModule} from "ng-zorro-antd/segmented";
 
 const routes: Routes = [
   {
@@ -17,6 +20,9 @@ const routes: Routes = [
   },
   {
     path: "plan", component: PagePlanRouteComponent
+  },
+  {
+    path: "planroute", component: CompPlanRouteComponent
   }
 
 ];
@@ -27,13 +33,20 @@ const routes: Routes = [
     CompRunOrderComponent,
     PagePlanRouteComponent,
     PagePlanInfoComponent,
+    CompPlanRouteComponent,
+  ],
+  exports: [
+    PagePlanRouteComponent,
+    CompPlanRouteComponent
   ],
   imports: [
     CommonModule,
     // EditAmapPositionPickerModule,
     RouterModule.forChild(routes),
     // 引用自定义独立组件模块
-    CompPoiPickerModule
+    CompPoiPickerModule,
+    NzTabsModule,
+    NzSegmentedModule
   ]
 })
 export class MapModule {

app-angular/src/modules/map/page-plan-route/page-plan-route.component.html

@@ -1,2 +1,6 @@
-<div id="container"></div>
-<div id="panel"></div>
+<ng-container *ngFor="let place of placeList">
+  <app-comp-poi-picker [(name)]="place.name" [(address)]="place.address"
+                       [(location)]="place.location"></app-comp-poi-picker>
+
+</ng-container>
+

app-angular/src/modules/map/page-plan-route/page-plan-route.component.ts

@@ -1,5 +1,5 @@
 import {Component, Input, OnInit} from '@angular/core';
-
+import * as Parse from "parse";
 import * as  AMapLoader from '@amap/amap-jsapi-loader';
 
 
@@ -13,98 +13,187 @@ import * as  AMapLoader from '@amap/amap-jsapi-loader';
   styleUrls: ['./page-plan-route.component.scss']
 })
 export class PagePlanRouteComponent implements OnInit {
-  @Input() keyword_destination: string
-  @Input() city_destination: string
-
-  AMap: any;
-  map: any;
-  location_pos: any
+  AMap: any
+  map: any // AMap.Map
+  placeList: Array<any> = []
+  currentTab: string = "place"
 
   constructor() {
-    this.keyword_destination = '';
-    this.city_destination = ''
+    this.addNewPlace()
+    this.currentTab = "plan"
   }
 
-  ngOnInit() {
-    this.getCurrentCity();
-    this.createMap()
-  }
+  addNewPlace() {
+    if (this.placeList?.length >= 0) {
+      this.placeList.push({
+        name: "秋水广场",
+        address: "南昌市秋水广场",
+        location: new Parse.GeoPoint({latitude: 28.682634, longitude: 115.86273})
+      })
+    } else {
+      this.placeList.push({
+        name: "八一广场",
+        address: "南昌市八一广场",
+        location: new Parse.GeoPoint({latitude: 28.673856, longitude: 115.904477})
+      })
+    }
 
-  async createMap() {
-    try {
-      this.AMap = await AMapLoader.load({
-        "key": "473b52010df7d3a32db0a2f5db245c8e",
-        "version": "2.0",
-        "plugins": [],
-      });
+  }
 
-      this.map = new this.AMap.Map('AMap.Driving', {
-        resizeEnable: true,
-        viewMode: "3D",
-        zoom: 13,
-        zooms: [4, 18],
-        center: [116.397428, 39.90923],
-        layers: [],
-        policy: this.AMap.DrivingPolicy.LEAST_TIME
-      });
+  ngAfterViewInit(): void {
+  }
 
-      this.AMap.plugin(['AMap.ToolBar', 'AMap.Driving'], () => {
-        var toolbar = new this.AMap.ToolBar();
-        this.map.addControl(toolbar);
-
-        var driving = new this.AMap.Driving({
-          map: this.map,
-          panel: "panel",
-        });
-        console.log(this.keyword_destination)
-        console.log(this.city_destination)
-        console.log(this.location_pos)
-
-        driving.search([], (status: string, result: any) => {
-          if (status === 'complete') {
-            console.log(1);
-          } else {
-            console.log(result);
-          }
-        });
-      });
-    } catch (error) {
-      console.log(error);
-    }
+  async initMap() {
+    await this.createMap()
+    this.goAndMarkPlace(this.placeList[0])
   }
 
-  async getCurrentCity() {
+  async createMap() {
     this.AMap = await AMapLoader.load({
-      "key": "473b52010df7d3a32db0a2f5db245c8e",
-      "version": "2.0",
-      "plugins": [],
-    });
-    this.map = new this.AMap.Map('container', {
-      resizeEnable: true
+      key: "473b52010df7d3a32db0a2f5db245c8e",       // 申请好的Web端开发者Key，首次调用 load 时必填
+      version: "2.0",                 // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
     })
-    this.AMap.plugin('AMap.Geolocation', async () => {
-      var geolocation = new this.AMap.Geolocation({
-        enableHighAccuracy: true,
-        timeout: 10000,
-        buttonPosition: 'RB',
-        buttonOffset: new this.AMap.Pixel(10, 20),
-        zoomToAccuracy: true,
-      });
-      this.map.addControl(geolocation);
-      await geolocation.getCurrentPosition(<PositionCallback>(status: any, result: any) => {
-          if (status === 'complete') {
-            console.log(result[0].formattedAddress)
-            console.log(result)
-            this.location_pos = result.position;
-          } else {
-            alert(result)
-          }
+    this.map = new this.AMap.Map('container-plan');
+  }
+
+  goAndMarkPlace(place: any) {
+    this.map.setCenter([place.location.latitude, place.location.longitude])
+    this.map.setZoom(18)
+    if (place.marker) return
+    place.marker = new this.AMap.Marker({
+      position: [place.location.latitude, place.location.longitude]
+    })
+    this.map.add(place.marker);
+  }
+
+  clearMark(place: any) {
+    place?.marker?.remove()
+  }
+
+  /**
+   * 路线规划 地点1 => 地点2
+   */
+  planRoute(p1: any, p2: any) {
+    let transfer;
+    this.map.plugin(["AMap.Transfer"], () => { //加载公交换乘插件
+      let transOptions = {
+        map: this.map,
+        city: '南昌市',
+        panel: 'panel',
+        // cityd:'经开区',
+        policy: this.AMap.TransferPolicy.LEAST_TIME
+      };
+      //构造公交换乘类
+      transfer = new this.AMap.Transfer(transOptions);
+      //根据起、终点坐标查询公交换乘路线
+      let p1pos = new this.AMap.LngLat(p1.location.longitude, p1.location.latitude)
+      let p2pos = new this.AMap.LngLat(p2.location.longitude, p2.location.latitude)
+      transfer.search(p1pos, p2pos, (status: string, result: any) => {
+        // result即是对应的公交路线数据信息，相关数据结构文档请参考  https://lbs.amap.com/api/javascript-api/reference/route-search#m_TransferResult
+        if (status === 'complete') {
+          console.log('绘制公交路线完成：')
+          console.log(result)
+        } else {
+          console.error('公交路线数据查询失败' + result)
         }
-      )
-      ;
+      });
     });
 
+
+  }
+
+  async createPlan() {
+    await this.initMap();
+    this.planRoute(this.placeList[0], this.placeList[1]);
   }
 
+  ngOnInit(): void {
+  }
+
+
+  // async createMap() {
+  //   try {
+  //     this.AMap = await AMapLoader.load({
+  //       "key": "473b52010df7d3a32db0a2f5db245c8e",
+  //       "version": "2.0",
+  //       "plugins": [],
+  //     });
+  //
+  //     this.map = new this.AMap.Map('AMap.Driving', {
+  //       resizeEnable: true,
+  //       viewMode: "3D",
+  //       zoom: 13,
+  //       zooms: [4, 18],
+  //       center: [116.397428, 39.90923],
+  //       layers: [],
+  //     });
+  //
+  //     this.AMap.plugin(['AMap.ToolBar', 'AMap.Driving'], () => {
+  //       var toolbar: any = new this.AMap.ToolBar();
+  //       this.map.addControl(toolbar);
+  //
+  //       var driving = new this.AMap.Driving({
+  //         map: this.map,
+  //         panel: "panel",
+  //       });
+  //       console.log(this.keyword_destination)
+  //       console.log(this.city_destination)
+  //       console.log(this.startLngLat)
+  //
+  //       driving.search(this.startLngLat, (status: string, result: any) => {
+  //         if (status === 'complete') {
+  //           console.log(1);
+  //         } else {
+  //           console.log(result);
+  //         }
+  //       });
+  //     });
+  //   } catch (error) {
+  //     console.log(error);
+  //   }
+  // }
+  //
+  //
+  // async goCurrentCenter() {
+  //   this.AMap = await AMapLoader.load({
+  //     "key": "473b52010df7d3a32db0a2f5db245c8e",
+  //     "version": "2.0",
+  //     "plugins": [],
+  //   });
+  //   this.AMap.plugin(["AMap.Geolocation"], () => {
+  //     // 创建定位对象
+  //     let geolocation = new this.AMap.Geolocation({
+  //       enableHighAccuracy: true, // 是否使用高精度定位，默认为true
+  //       timeout: 10000, // 超过10秒后停止定位，默认：无穷大
+  //       maximumAge: 0, // 定位结果缓存0毫秒，默认：0
+  //       convert: true, // 自动偏移坐标，偏移后的坐标为高德坐标，默认：true
+  //       showButton: true, // 显示定位按钮，默认：true
+  //       buttonPosition: 'RB', // 定位按钮停靠位置，默认：'LB'，左下角
+  //       buttonOffset: new this.AMap.Pixel(10, 10), // 定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
+  //       showMarker: false, // 定位成功后在定位到的位置显示点标记，默认：true
+  //       showCircle: false, // 定位成功后用圆圈表示定位精度范围，默认：true
+  //       panToLocation: true, // 定位成功后将定位到的位置作为地图中心点，默认：true
+  //       zoomToAccuracy: false // 定位成功后将定位精度范围显示在地图上，默认：true
+  //     });
+  //     this.map = new this.AMap.Map('container');
+  //     // 添加定位插件
+  //     this.map.addControl(geolocation);
+  //
+  //     // 获取当前位置信息
+  //     geolocation.getCurrentPosition((status: string, result: any) => {
+  //       if (status == 'complete') {
+  //         // 定位成功
+  //         this.startLngLat.push(result.position.getLng(), result.position.getLat())
+  //         console.log('当前位置经度：' + result.position.getLng());
+  //
+  //         console.log('当前位置纬度：' + result.position.getLat());
+  //       } else {
+  //         // 定位失败
+  //         console.log('定位失败：' + result.message);
+  //       }
+  //     });
+  //   })
+  // }
+
 }