import {Component} from '@angular/core';
import * as AMapLoader from "@amap/amap-jsapi-loader"

import {load} from '@amap/amap-jsapi-loader';
import {OnInit} from '@angular/core';

@Component({
  selector: 'app-page-map-start',
  templateUrl: './page-map-start.component.html',
  styleUrls: ['./page-map-start.component.scss']
})
export class PageMapStartComponent {

  AMap: any
  map: any
  placeList: Array<any> = [
    {name: "江财蛟桥校区", location: [115.855125, 28.744335]},
    {name: "江财枫林校区", location: [115.835639, 28.734119]},
    {name: "江财麦庐校区", location: [115.816717, 28.728899]},
  ]

  async initMap() {
    await this.createMap()
    this.goAndMarkPlace(this.placeList[1])
  }

  ngAfterViewInit(): void {
    this.initMap();
  }

  async createMap() {
    this.AMap = await AMapLoader.load({
      key: "473b52010df7d3a32db0a2f5db245c8e",       // 申请好的Web端开发者Key，首次调用 load 时必填
      version: "2.0",                 // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    })
    this.map = new this.AMap.Map('container');
  }

  /**
   * 添加点标记 Marker
   */
  async addMarks() {
    // JS API 提供了在地图之上绘制覆盖物的能力，现在我们添加add()一个默认的点标记Marker。
    let marker = new this.AMap.Marker({
      position: [115.835639, 28.734119] //位置
    })
    this.map.add(marker); //添加到地图
  }

  goAndMarkPlace(place: any) {
    this.map.setCenter(place.location)
    this.map.setZoom(18)
    console.log(this.placeList)
    if (place.marker) return
    place.marker = new this.AMap.Marker({
      position: place.location
    })
    this.map.add(place.marker);
  }

  clearMark(place: any) {
    place.marker.remove();
  }


}
