<!--
 * @Date: 2023-05-19 14:54:27
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2023-06-05 11:38:09
 * @FilePath: /map-demo/src/views/index.vue
 * @Description: 文件描述
-->
<template>
  <div ref="root" style="height: 100vh; position: relative; overflow: hidden;">
    <div id="container"></div>
    <div class="nav-bar-wrapper">
      <div class="hideScrollBar"
        style="display: flex; overflow-x: scroll; overflow-y: hidden; -webkit-overflow-scrolling: touch; position: relative;">
        <div v-for="(item, index) in navBarList" :key="index" style="width: 30%; flex-shrink: 0; padding-top: 1rem;" :class="[isActive === index ? 'checked' : '', 'item']"
          @click="setNavLayer(item, index)">
          <van-icon name="shop-o" size="1.5rem" /><br />
          <span style="font-size: 0.85rem; margin-top: 0.5rem; display: inline-block;">{{ item.name }}</span>
        </div>
        <div style="width: 4rem;flex-shrink: 0;"></div>
        <div style="position: fixed; right: 0; background-color: white; height: 4.5rem; width: 4rem;">
          <div style="padding-top: 40%;">
            <van-icon v-if="!show_nav_popup" name="arrow-up" @click="handleNavPopup" size="1.15rem" />
            <van-icon v-else name="arrow-down" @click="handleNavPopup" size="1.15rem" />
          </div>
        </div>
      </div>

      <van-popup v-model:show="show_nav_popup" position="bottom" duration="0" :overlay="false"
        :style="{ padding: '1rem', bottom: '4.5rem' }">
        <div style="text-align: left;">
          <div @click="positionMarker()" style="margin-bottom: 1rem; font-size: 1.15rem;"><van-icon name="fire-o" color="red" />&nbsp;&nbsp;三宝楼</div>
          <div style="margin-bottom: 1rem; font-size: 1.15rem;"><van-icon name="fire-o" color="red" />&nbsp;&nbsp;法云堂</div>
          <div style="margin-bottom: 1rem; font-size: 1.15rem;"><van-icon name="fire-o" color="red" />&nbsp;&nbsp;罗汉堂</div>
          <div style="margin-bottom: 1rem; font-size: 1.15rem;"><van-icon name="fire-o" color="red" />&nbsp;&nbsp;大雄宝殿</div>
        </div>
      </van-popup>
    </div>
    <!-- <div class="safe-route-wrapper">
      <span v-if="open_safe_route" @click="handleSafeRoute(true)">打开安全路线</span>
      <span v-else @click="handleSafeRoute(false)">关闭安全路线</span>
    </div> -->
    <!-- <div class="tool-bar-wrapper">
      <div style="display: flex; flex-direction: column;align-items: center;justify-content: center;">
        <van-icon name="plus" style="margin-bottom: 1rem;" @click="setZoom('plus')" />
        <van-icon name="minus" style="margin-bottom: 1rem;" @click="setZoom('minus')" />
        <van-icon name="aim" @click="setLocation" />
      </div>
    </div> -->
    <div class="operate-bar-wrapper">
      <div class="box-wrapper">
        <div class="item" @click="setLocation">
          <i class="fa fa-crosshairs"></i><br />
          定位
        </div>
        <div v-if="show_walk_route" class="item" @click="setWalkRoute">
          <i class="fa fa-eye"></i><br />
          步行
        </div>
        <div v-else class="item" @click="removeWalkRoute">
          <i class="fa fa-eye-slash"></i><br />
          步行
        </div>
        <div v-if="open_safe_route" class="item" @click="handleSafeRoute(true)">
          <i class="fa fa-eye"></i><br />
          路线
        </div>
        <div v-else class="item" @click="handleSafeRoute(false)">
          <i class="fa fa-eye-slash"></i><br />
          路线
        </div>
      </div>
    </div>

    <!-- <div style="position: fixed; bottom: 0; height: 2rem; width: 100%; background-color: white; z-index: 999;"></div> -->

    <van-popup v-model:show="show_popup" position="bottom" :overlay="true" :style="{ padding: '1rem', height: '100%' }">
      <van-icon name="cross" size="1.35rem" @click="show_popup = false" style="float: right; color: gray;" />
      <div class="popup-wrapper">
        <div class="title">
          {{ popup_title }}
        </div>
        <div class="content" v-html="popup_content"></div>
        <video-player ref="videoPlayer" style="width: 100%; height: 30vh; margin-top: 1rem;"
          poster="https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100"
          :src="video_src" class="video-player vjs-big-play-centered" controls :loop="true" :volume="0.6"></video-player>
      </div>
    </van-popup>

    <van-dialog v-model:show="dialog_show" title="温馨提示">
      <div style="padding: 1rem; text-align: center;">您不在景区范围内</div>
    </van-dialog>

    <!-- 自定义组件InfoWindow，初始时需要隐藏 -->
    <!-- 隐藏不要使用v-if，因为我们需要渲染完成后的原生html结构作为信息框的dom对象使用 -->
    <InfoWindow v-show="showInfoWindow" ref="infoWindow" :info-window="infoWindow" :title="infoWindowTitle" :rect="rect"></InfoWindow>
  </div>
</template>

<script>
// import { Flexbox, FlexboxItem } from 'vux'
// import { mapState } from 'vuex'
import coord from '@/common/tiantan_v2'
// import AMap from 'AMap'
import _ from 'lodash';
import $ from 'jquery';
//引入定义的信息窗组件
import InfoWindow from '@/components/InfoWindow'
import { useRect } from '@vant/use';

const GPS = {
  PI: 3.14159265358979324,
  x_pi: 3.14159265358979324 * 3000.0 / 180.0,
  delta: function (lat, lon) {
    var a = 6378245.0; //  a: 卫星椭球坐标投影到平面地图坐标系的投影因子。
    var ee = 0.00669342162296594323; //  ee: 椭球的偏心率。
    var dLat = this.transformLat(lon - 105.0, lat - 35.0);
    var dLon = this.transformLon(lon - 105.0, lat - 35.0);
    var radLat = lat / 180.0 * this.PI;
    var magic = Math.sin(radLat);
    magic = 1 - ee * magic * magic;
    var sqrtMagic = Math.sqrt(magic);
    dLat = (dLat * 180.0) / ((a * (1 - ee)) / (magic * sqrtMagic) * this.PI);
    dLon = (dLon * 180.0) / (a / sqrtMagic * Math.cos(radLat) * this.PI);
    return {
      'lat': dLat,
      'lon': dLon
    };
  },
  //WGS-84 to GCJ-02
  gcj_encrypt: function (wgsLat, wgsLon) {
    if (this.outOfChina(wgsLat, wgsLon))
      return {
        'lat': wgsLat,
        'lon': wgsLon
      };

    var d = this.delta(wgsLat, wgsLon);
    return {
      'lat': wgsLat + d.lat,
      'lon': wgsLon + d.lon
    };
  },
  outOfChina: function (lat, lon) {
    if (lon < 72.004 || lon > 137.8347)
      return true;
    if (lat < 0.8293 || lat > 55.8271)
      return true;
    return false;
  },
  transformLat: function (x, y) {
    var ret = -100.0 + 2.0 * x + 3.0 * y + 0.2 * y * y + 0.1 * x * y + 0.2 * Math.sqrt(Math.abs(x));
    ret += (20.0 * Math.sin(6.0 * x * this.PI) + 20.0 * Math.sin(2.0 * x * this.PI)) * 2.0 / 3.0;
    ret += (20.0 * Math.sin(y * this.PI) + 40.0 * Math.sin(y / 3.0 * this.PI)) * 2.0 / 3.0;
    ret += (160.0 * Math.sin(y / 12.0 * this.PI) + 320 * Math.sin(y * this.PI / 30.0)) * 2.0 / 3.0;
    return ret;
  },
  transformLon: function (x, y) {
    var ret = 300.0 + x + 2.0 * y + 0.1 * x * x + 0.1 * x * y + 0.1 * Math.sqrt(Math.abs(x));
    ret += (20.0 * Math.sin(6.0 * x * this.PI) + 20.0 * Math.sin(2.0 * x * this.PI)) * 2.0 / 3.0;
    ret += (20.0 * Math.sin(x * this.PI) + 40.0 * Math.sin(x / 3.0 * this.PI)) * 2.0 / 3.0;
    ret += (150.0 * Math.sin(x / 12.0 * this.PI) + 300.0 * Math.sin(x / 30.0 * this.PI)) * 2.0 / 3.0;
    return ret;
  }
};

export default {
  components: { InfoWindow },
  data() {
    return {
      map: '',
      facilities: [],
      imageLayer: '',
      location_options: {
        'showButton': true, // 是否显示定位按钮
        'buttonPosition': 'LB', // 定位按钮的位置
        /* LT LB RT RB */
        'buttonOffset': new AMap.Pixel(10, 20), // 定位按钮距离对应角落的距离
        'showMarker': true, // 是否显示定位点
        'markerOptions': { // 自定义定位点样式，同Marker的Options
          'offset': new AMap.Pixel(-18, -36),
          'content': '<img src="https://a.amap.com/jsapi_demos/static/resource/img/user.png" style="width:36px;height:36px"/>'
        },
        'showCircle': true, // 是否显示定位精度圈
        'circleOptions': { // 定位精度圈的样式
          'strokeColor': '#0093FF',
          'noSelect': true,
          'strokeOpacity': 0.5,
          'strokeWeight': 1,
          'fillColor': '#02B0FF',
          'fillOpacity': 0.25
        },
        enableHighAccuracy: true
      },
      geolocation: '',
      current_lng: '',
      current_lat: '',
      current_route: '',
      spotInfo: [], // 景点信息实体
      toiletInfo: [], // 厕所信息实体
      activityInfo: [], // 活动场所信息实体
      publicInfo: [], // 公共设施信息实体
      show_popup: false,
      dialog_show: false,
      xys_lng: '',
      xys_lat: '',
      walk_route: '',
      toolBar: '',
      isActive: 0,
      safe_route: [],
      open_safe_route: true,
      show_walk_route: true,
      popup_title: '',
      popup_content: '',
      video_src: '',
      show_nav_popup: false,
      showInfoWindow: false,
      infoWindow: {},
      infoWindowTitle: '',
      navBarList: [],
      rect: {}
    }
  },
  mounted() {
    this.navBarList = [{
      key: 'spot',
      name: '景区信息'
    }, {
      key: 'activity',
      name: '活动设施'
    }, {
      key: 'public',
      name: '公共设施'
    }, {
      key: 'toilet',
      name: '卫生间'
    }]
    // 初始化地图
    this.initMap();
    // this.loadPublicEquipment();
    // this.loadScenicSpot();
    // this.loadPlant();
    // this.setMapBoundary();
    // 使用之前都要再获取一下地址
    this.getLocation()
    // 打开贴片地图
    this.setTitleLayer()
  },
  watch: {
    show_popup(val) {
      if (!val) {
        this.$nextTick(() => {
          // 弹框关闭时，暂停视频
          $('.vjs-tech')[0].pause();
          $('.vjs-tech')[0].currentTime = 0;
        })
      }
    },
    showInfoWindow (val) {
      if (val) {
        // 元素的大小及其相对于视口的位置
        const rect = useRect(this.$refs.root);
        this.rect = rect;
      }
    }
  },
  methods: {
    initMap() {
      // 初始化地图
      this.map = new AMap.Map('container', {
        viewMode: '3D', // 设置地图模式
        turboMode: false,
        showIndoorMap: false,
        defaultCursor: 'pointer', // 地图默认鼠标样式
        showBuildingBlock: false, // 是否展示地图 3D 楼块
        zooms: [17, 19], // 地图显示的缩放级别范围, 默认为 [2, 20] ，取值范围 [2 ~ 30]
        showLabel: true, // 是否展示地图文字和 POI 信息
        zoom: 18, // 设置地图显示的缩放级别
        pitch: 0, // 俯仰角度，默认 0，最大值根据地图当前 zoom 级别不断增大，2D地图下无效 。
        rotation: 0, // 地图顺时针旋转角度，取值范围 [0-360] ，默认值：0
        center: [120.587382, 31.314504], // 设置地图中心点坐标
        forceVector: false,
        rotateEnable: false,
        layers: [
          // new AMap.TileLayer.RoadNet(),
        ],
        features: ['bg', 'road'], // 设置地图上显示的元素种类
        animateEnable: false, // 地图平移过程中是否使用动画
      });
      // 添加地图点击事件
      this.map.on("click", this.showInfoClick);
      //
      this.setSpotLayer()
    },
    // layerMap() {
    //   // 图层地图
    //   this.imageLayer = new AMap.ImageLayer({
    //     url: 'http://amappc.cn-hangzhou.oss-pub.aliyun-inc.com/lbs/static/img/dongwuyuan.jpg',
    //     // url: 'https://img.zcool.cn/community/01462356c80e976ac7252ce62bc446.jpg@1280w_1l_0o_100sh.jpg',
    //     // url: 'https://cdn.ipadbiz.cn/tmp/map_test/xys.jpg',
    //     bounds: new AMap.Bounds(
    //       [116.406897, 39.874346], [116.417451, 39.887843] // 对象西南角经纬度和东北角经纬度值
    //     ),
    //     opacity: 0.5, // 图层透明度，默认为 1
    //     zooms: [2, 18],
    //     zIndex: 6 // 图层的层级，默认为 6
    //   });
    //   this.map = new AMap.Map('container', {
    //     viewMode: '3D', // 设置地图模式
    //     turboMode: false,
    //     showIndoorMap: false,
    //     defaultCursor: 'pointer', // 地图默认鼠标样式
    //     showBuildingBlock: false, // 是否展示地图 3D 楼块
    //     zooms: [2, 20], // 地图显示的缩放级别范围, 默认为 [2, 20] ，取值范围 [2 ~ 30]
    //     showLabel: false, // 是否展示地图文字和 POI 信息
    //     zoom: 18, // 设置地图显示的缩放级别
    //     pitch: 0, // 俯仰角度，默认 0，最大值根据地图当前 zoom 级别不断增大，2D地图下无效 。
    //     rotation: 0, // 地图顺时针旋转角度，取值范围 [0-360] ，默认值：0
    //     center: [116.408967, 39.880101], // 设置地图中心点坐标
    //     forceVector: false,
    //     rotateEnable: false,
    //     layers: [
    //       new AMap.TileLayer.RoadNet(),
    //       this.imageLayer
    //     ]
    //   });
    // },
    // loadPublicEquipment() { // 加载公共设备图标
    //   var zoomStyleMapping = { 14: 0, 15: 0, 16: 0, 17: 0, 18: 0, 19: 0, 20: 0 };
    //   _.each(coord.sheshi, (x, i) => {
    //     var marker = new AMap.ElasticMarker({
    //       position: coord.sheshi[i].position,
    //       zooms: [14, 20],
    //       styles: [{
    //         icon: {
    //           img: coord.sheshi[i].icon,
    //           size: [16, 16], // 可见区域的大小
    //           anchor: 'bottom-center', // 锚点
    //           fitZoom: 14, // 最合适的级别
    //           scaleFactor: 2, // 地图放大一级的缩放比例系数
    //           maxScale: 1.4, // 最大放大比例
    //           minScale: 0.8 // 最小放大比例
    //         }
    //       }],
    //       zoomStyleMapping
    //     });
    //     let infoWindowContent =
    //       '<div className="custom-infowindow input-card">' +
    //       '<label style="color:grey">公共厕所</label>' +
    //       // 为 infowindow 添加自定义事件
    //       '<div id="lnglat2container" class="btn">我要走过去</div>' +
    //       '</div>';
    //     // 创建一个自定义内容的 infowindow 实例
    //     let infoWindow = new AMap.InfoWindow({
    //       position: coord.sheshi[i].position,
    //       offset: new AMap.Pixel(0, -30),
    //       content: infoWindowContent
    //     });
    //     if (clickListener) {
    //       infoWindow.off('click', clickListener)
    //     }
    //     // 绑定景点的点击事件 - 文字出现才能触发
    //     var clickListener = marker.on('click', (e) => {
    //       infoWindow.open(this.map);
    //     })
    //     //
    //     this.facilities.push(marker);
    //   })
    //   this.map.add(this.facilities);
    // },
    // loadScenicSpot() { // 加载景点图标
    //   var spots = [];
    //   var zoomStyleMapping = { 14: 0, 15: 0, 16: 1, 17: 1, 18: 1, 19: 1, 20: 1 }
    //   _.each(coord.touristSpots, (x, i) => {
    //     var marker = new AMap.ElasticMarker({
    //       position: coord.touristSpots[i].position,
    //       zooms: [14, 20],
    //       styles: [{
    //         icon: {
    //           img: coord.touristSpots[i].smallIcon,
    //           size: [16, 16], // 可见区域的大小
    //           anchor: 'bottom-center', // 锚点
    //           fitZoom: 14, // 最合适的级别
    //           scaleFactor: 2, // 地图放大一级的缩放比例系数
    //           maxScale: 2, // 最大放大比例
    //           minScale: 1 // 最小放大比例
    //         },
    //         label: {
    //           content: coord.touristSpots[i].name,
    //           position: 'BM',
    //           minZoom: coord.touristSpots[i].minZoom
    //         }
    //       }, {
    //         icon: {
    //           img: coord.touristSpots[i].bigIcon,
    //           size: coord.touristSpots[i].size,
    //           anchor: coord.touristSpots[i].anchor,
    //           fitZoom: 17.5,
    //           scaleFactor: 2,
    //           maxScale: 2,
    //           minScale: 0.125
    //         },
    //         label: {
    //           content: coord.touristSpots[i].name,
    //           position: 'BM',
    //           minZoom: coord.touristSpots[i].minZoom
    //         }
    //       }],
    //       zoomStyleMapping
    //     });
    //     if (clickListener) {
    //       AMap.Event.removeListener(clickListener); // 移除地图事件，以绑定时返回的对象作为参数
    //     }
    //     // 绑定景点的点击事件 - 文字出现才能触发
    //     var clickListener = AMap.Event.addListener(marker, 'click', function (e) {
    //       alert(coord.touristSpots[i].name)
    //     });
    //     spots.push(marker);
    //   })
    //   this.map.add(spots);
    // },
    // loadPlant() { // 加载植物图标
    //   var zoomStyleMapping = { 14: 0, 15: 0, 16: 0, 17: 0, 18: 0, 19: 0, 20: 0 };
    //   var trees = new AMap.ElasticMarker({
    //     position: [116.410908, 39.88057],
    //     zooms: [15.5, 20],
    //     styles: [{
    //       icon: {
    //         img: 'https://a.amap.com/jsapi_demos/static/resource/img/trees.png',
    //         size: [366, 201],
    //         anchor: 'center',
    //         imageSize: [865, 1156],
    //         imageOffset: [-44, -480],
    //         fitZoom: 17.5,
    //         scaleFactor: 2,
    //         maxScale: 2,
    //         minScale: 0.125
    //       }
    //     }],
    //     zoomStyleMapping
    //   });

    //   this.map.add(trees);
    // },
    loadSpotMaker() { // 加载景点标记
      var zoomStyleMapping = { 14: 0, 15: 0, 16: 0, 17: 0, 18: 0, 19: 0, 20: 0 };
      _.each(coord.spotInfo, (x, i) => {
        var marker = new AMap.ElasticMarker({
          position: coord.spotInfo[i].position,
          zooms: [17, 19],
          styles: [{
            icon: {
              img: coord.spotInfo[i].icon,
              size: [28, 28], // 可见区域的大小
              anchor: 'bottom-center', // 锚点
              fitZoom: 14, // 最合适的级别
              scaleFactor: 2, // 地图放大一级的缩放比例系数
              maxScale: 1.4, // 最大放大比例
              minScale: 0.8 // 最小放大比例
            },
            label: {
              content: coord.spotInfo[i].name,
              position: 'TM',
              minZoom: 18
            }
          }],
          zoomStyleMapping
        });
        if (clickListener) {
          marker.off('click', clickListener)
        }
        // 绑定景点的点击事件 - 文字出现才能触发
        var clickListener = marker.on('click', (e) => {
          // this.show_popup = true;
          // this.popup_title = x.name;
          // this.popup_content = x.note;
          // this.video_src = 'https://video.pearvideo.com/mp4/short/20200209/cont-1650197-14888002-hd.mp4'
          // this.positionMarker(coord.spotInfo[i].position);
          this.positionMarker([120.587519, 31.315924]);
        })
        //
        this.spotInfo.push(marker);
      })
      this.map.add(this.spotInfo);
    },
    loadToiletMaker() { // 加载厕所标记
      var zoomStyleMapping = { 14: 0, 15: 0, 16: 0, 17: 0, 18: 0, 19: 0, 20: 0 };
      _.each(coord.toiletInfo, (x, i) => {
        var marker = new AMap.ElasticMarker({
          position: coord.toiletInfo[i].position,
          zooms: [17, 19],
          styles: [{
            icon: {
              img: coord.toiletInfo[i].icon,
              size: [28, 28], // 可见区域的大小
              anchor: 'bottom-center', // 锚点
              fitZoom: 14, // 最合适的级别
              scaleFactor: 2, // 地图放大一级的缩放比例系数
              maxScale: 1.4, // 最大放大比例
              minScale: 0.8 // 最小放大比例
            },
            label: {
              content: coord.toiletInfo[i].name,
              position: 'TM',
              minZoom: 18
            }
          }],
          zoomStyleMapping
        });
        if (clickListener) {
          marker.off('click', clickListener)
        }
        // 绑定景点的点击事件 - 文字出现才能触发
        var clickListener = marker.on('click', (e) => {
          this.show_popup = true;
        })
        //
        this.toiletInfo.push(marker);

      })
      this.map.add(this.toiletInfo);
    },
    loadActivityMaker() { // 加载活动标记
      var zoomStyleMapping = { 14: 0, 15: 0, 16: 0, 17: 0, 18: 0, 19: 0, 20: 0 };
      _.each(coord.activityInfo, (x, i) => {
        var marker = new AMap.ElasticMarker({
          position: coord.activityInfo[i].position,
          zooms: [17, 19],
          styles: [{
            icon: {
              img: coord.activityInfo[i].icon,
              size: [28, 28], // 可见区域的大小
              anchor: 'bottom-center', // 锚点
              fitZoom: 14, // 最合适的级别
              scaleFactor: 2, // 地图放大一级的缩放比例系数
              maxScale: 1.4, // 最大放大比例
              minScale: 0.8 // 最小放大比例
            },
            label: {
              content: coord.activityInfo[i].name,
              position: 'TM',
              minZoom: 18
            }
          }],
          zoomStyleMapping
        });
        if (clickListener) {
          marker.off('click', clickListener)
        }
        // 绑定景点的点击事件 - 文字出现才能触发
        var clickListener = marker.on('click', (e) => {
          this.show_popup = true;
        })
        //
        this.activityInfo.push(marker);

      })
      this.map.add(this.activityInfo);
    },
    loadPublicMaker() { // 加载公共设施标记
      var zoomStyleMapping = { 14: 0, 15: 0, 16: 0, 17: 0, 18: 0, 19: 0, 20: 0 };
      _.each(coord.publicInfo, (x, i) => {
        var marker = new AMap.ElasticMarker({
          position: coord.publicInfo[i].position,
          zooms: [17, 19],
          styles: [{
            icon: {
              img: coord.publicInfo[i].icon,
              size: [28, 28], // 可见区域的大小
              anchor: 'bottom-center', // 锚点
              fitZoom: 18, // 最合适的级别
              scaleFactor: 2, // 地图放大一级的缩放比例系数
              maxScale: 1.4, // 最大放大比例
              minScale: 0.8 // 最小放大比例
            },
            label: {
              content: coord.publicInfo[i].name,
              position: 'TM',
              minZoom: 18
            }
          }],
          zoomStyleMapping
        });
        if (clickListener) {
          marker.off('click', clickListener)
        }
        // 绑定景点的点击事件 - 文字出现才能触发
        var clickListener = marker.on('click', (e) => {
          this.show_popup = true;
        })
        //
        this.publicInfo.push(marker);

      })
      this.map.add(this.publicInfo);
    },
    setMapBoundary() { // 地图描边
      new AMap.Polygon({
        cursor: 'pointer',
        bubble: true,
        path: [[120.587704, 31.312785], [120.587669, 31.313028], [120.587554, 31.313086], [120.586883, 31.313019], [120.586826, 31.314066], [120.586736, 31.314426], [120.585872, 31.314466], [120.585675, 31.315276], [120.585817, 31.315397], [120.586251, 31.31542], [120.586229, 31.31618], [120.588248, 31.316367], [120.588533, 31.314761], [120.588479, 31.31474], [120.588482, 31.314172], [120.588251, 31.314145], [120.588337, 31.313184], [120.588337, 31.313184], [120.588154, 31.313163], [120.588152, 31.312835]],
        map: this.map,
        fillOpacity: 0.5,
        strokeWeight: 1,
        fillColor: '#CFE7AA'
      });
    },
    showPublic() {
      this.map.add(this.facilities);
    },
    hidePublic() {
      this.map.remove(this.facilities);
    },
    setLocation() { // 开启定位服务
      // this.map.addControl(this.geolocation); // 添加定位图标 自动跳转当前位置
      if (!this.current_lng || !this.current_lat) {
        this.getLocation()
      } else {
        // 使用纠正偏移后的地址，打一个定位标记
        var marker = new AMap.Marker({
          position: new AMap.LngLat(this.current_lng, this.current_lat),   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
        });
        this.map.add(marker);
        // 定位到地图中心-西园寺
        this.map.setCenter([120.587334, 31.314823]);
        // 判断是否在范围内
        let isPointInRing = AMap.GeometryUtil.isPointInRing([this.current_lng, this.current_lat], [
          [120.585111, 31.316084], [120.585111, 31.316084], [120.589488, 31.313197], [120.585422, 31.313005]
        ]);
        if (!isPointInRing) {
          this.dialog_show = true;
        }
      }
    },
    getLocation() {
      AMap.plugin(['AMap.Geolocation'], () => {
        this.geolocation = new AMap.Geolocation(this.location_options);
        this.geolocation.getCurrentPosition((status, result) => {
          if (status === 'complete') {
            let lat = result.position.lat;
            let lng = result.position.lng;
            // 行动路线
            if (lng && lat) {
              this.current_lng = GPS.gcj_encrypt(lat, lng).lon;
              this.current_lat = GPS.gcj_encrypt(lat, lng).lat;
              // 西园寺的经纬度
              this.xys_lng = GPS.gcj_encrypt(31.315021, 120.58848).lon;
              this.xys_lat = GPS.gcj_encrypt(31.315021, 120.58848).lat;
            }
          }
        })
      });
    },
    setZoom(type) { // 设置放大缩小地图
      const zoom = this.map.getZoom();
      if (type === 'plus') {
        this.map.setZoom(zoom + 1)
      }
      if (type === 'minus') {
        this.map.setZoom(zoom - 1)
      }
    },
    setRoute() { // 生成路径
      // 行动路线
      var path = [
        [120.587512, 31.313796],
        [120.587495, 31.314204],
        [120.586862, 31.314304],
        [120.586841, 31.314543]
      ];

      this.current_route = new AMap.Polyline({
        path: path,
        isOutline: true,
        outlineColor: '#7F7F7F',
        borderWeight: 1,
        strokeColor: '#7F7F7F',
        strokeOpacity: 1,
        strokeWeight: 1,
        // 折线样式还支持 'dashed'
        strokeStyle: 'solid',
        // strokeStyle是dashed时有效
        strokeDasharray: [10, 5],
        lineJoin: 'round',
        lineCap: 'round',
        zIndex: 50
      })
    },
    addSafeRoute() { // 新增路径
      this.setRoute();
      this.map.add([this.current_route]);
      //
      var marker1 = new AMap.Marker({
        icon: new AMap.Icon({
          image: 'https://cdn.ipadbiz.cn/xys/map/%E5%AE%9A%E4%BD%8D-%E5%B0%8F1@2x.png',
          size: new AMap.Size(40, 40),
          // 图标所用图片大小
          imageSize: new AMap.Size(40, 40),
          // 图标取图偏移量
          imageOffset: new AMap.Pixel(0, 0)
        }),
        position: new AMap.LngLat(120.587506, 31.313787),   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
        anchor:'bottom-center',
        offset: new AMap.Pixel(0, 0)
      });
      marker1.setLabel({
        direction:'right',
        offset: new AMap.Pixel(0, -10),  //设置文本标注偏移量
        content: "<div class='info'>起点</div>", //设置文本标注内容
      });
      var marker2 = new AMap.Marker({
        icon: new AMap.Icon({
          image: 'https://cdn.ipadbiz.cn/xys/map/%E5%AE%9A%E4%BD%8D-%E5%B0%8F1@2x.png',
          size: new AMap.Size(40, 40),
          // 图标所用图片大小
          imageSize: new AMap.Size(40, 40),
          // 图标取图偏移量
          imageOffset: new AMap.Pixel(0, 0)
        }),
        position: new AMap.LngLat(120.586825, 31.314543),   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
        anchor:'bottom-center',
        offset: new AMap.Pixel(0, 0)
      });
      marker2.setLabel({
        direction:'right',
        offset: new AMap.Pixel(0, -10),  //设置文本标注偏移量
        content: "<div class='info'>终点</div>", //设置文本标注内容
      });
      // 新增逃生路线标记
      this.safe_route = [marker1, marker2]
      this.map.add(this.safe_route);
    },
    removeSafeRoute() { // 删除路径
      this.map.remove([this.current_route]);
      this.map.remove(this.safe_route);
    },
    setTitleLayer() {
      var layer = new AMap.TileLayer.Flexible({
        cacheSize: 50,
        opacity: 1,
        zIndex: 100,
        createTile: function (x, y, z, success, fail) {
          if (z === 17) {
            if (x < 109439 || x > 109441) {
              fail()
              return;
            }
            if (y < 53519 || y > 53521) {
              fail()
              return;
            }
          }
          if (z === 18) {
            if (x < 218879 || x > 218882) {
              fail()
              return;
            }
            if (y < 107039 || y > 107042) {
              fail()
              return;
            }
          }

          var img = document.createElement('img');
          img.onload = function () {
            success(img)
          };
          img.crossOrigin = "anonymous";// 必须添加，同时图片要有跨域头
          img.onerror = function () {
            fail()
          };

          img.src = `images/tiles/${z}/${x}_${y}.jpg`
        }
      });

      this.map.addLayer(layer);

      // Canvas作为切片
      var layer1 = new AMap.TileLayer.Flexible({
        // tileSize: 128,
        cacheSize: 300,
        zIndex: 200,
        createTile: function (x, y, z, success, fail) {
          var c = document.createElement('canvas');
          c.width = c.height = 256;

          var cxt = c.getContext("2d");
          cxt.font = "15px Verdana";
          cxt.fillStyle = "#ff0000";
          cxt.strokeStyle = "#FF0000";
          cxt.strokeRect(0, 0, 256, 256);
          cxt.fillText('(' + [x, y, z].join(',') + ')', 10, 30);

          // 通知API切片创建完成
          success(c);
        }
      });

      // layer1.setMap(this.map);

      // 只显示相应区域，移动会回到选定范围
      // this.lockMapBounds()

    },
    setSpotLayer() { // 设置景点图层
      this.removeToiletLayer()
      this.removeActivityLayer()
      this.removePublicLayer()
      // 加载地图标记
      this.loadSpotMaker()
    },
    setToiletLayer() { // 设置景点图层
      this.removeSpotLayer()
      this.removeActivityLayer()
      this.removePublicLayer()
      // 加载厕所标记
      this.loadToiletMaker()
    },
    setActivityLayer() { // 设置活动图层
      this.removeSpotLayer();
      this.removeToiletLayer()
      this.removePublicLayer()
      // 加载活动标记
      this.loadActivityMaker()
    },
    setPublicLayer() { // 设置公共图层
      this.removeSpotLayer();
      this.removeToiletLayer()
      this.removeActivityLayer()
      // 加载公共标记
      this.loadPublicMaker()
    },
    removeSpotLayer() { // 删除景点标记
      this.map.remove(this.spotInfo);
    },
    removeToiletLayer() { // 删除景点标记
      this.map.remove(this.toiletInfo);
    },
    removeActivityLayer() { // 删除活动标记
      this.map.remove(this.activityInfo);
    },
    removePublicLayer() { // 删除公共标记
      this.map.remove(this.publicInfo);
    },
    // 限制地图范围
    lockMapBounds() {
      // var bounds = this.map.getBounds();
      var myBounds = new AMap.Bounds(
        [120.585138, 31.312908],
        [120.588839, 31.316492]
      );

      this.map.setLimitBounds(myBounds);
    },
    showInfoClick(e) {
      console.log(e);
      var zoom = this.map.getZoom(); //获取当前地图级别
      var text =
        "您在 [ " +
        e.lnglat.getLng() +
        "," +
        e.lnglat.getLat() +
        " ] 的位置单击了地图！当前层级" +
        zoom;
      console.warn(text);
      // 点击空白处 关闭弹框
      if (this.showInfoWindow) {
        this.$refs['infoWindow'].close();
        // 打开缩放
        this.map.setStatus({
          zoomEnable: true
        });
      }
    },
    setWalkRoute() {
      //步行导航
      let walking_CallBack = (result) => {
        if (result.type === 'complete') {
          console.warn(result);
          console.warn('绘制步行路线完成');
        } else {
          console.error('步行路线数据查询失败' + result);
        }
      }
      AMap.plugin(["AMap.Walking"], () => { //加载步行导航插件
        this.walk_route = new AMap.Walking({
          map: this.map,
        }); //构造步行导航类
        AMap.Event.addListener(this.walk_route, "complete", walking_CallBack); //返回导航查询结果
        //根据起、终点坐标规划步行路线
        this.walk_route.search(new AMap.LngLat(120.587799, 31.313276), new AMap.LngLat(120.587912, 31.315169));
      });
      this.show_walk_route = false;
    },
    removeWalkRoute() {
      this.walk_route.clear();
      this.show_walk_route = true;
    },
    setNavLayer({ key }, index) { // 选择地图图层显示
      this.isActive = index;
      if (key === 'spot') {
        this.setSpotLayer()
      }
      if (key === 'toilet') {
        this.setToiletLayer()
      }
      if (key === 'activity') {
        this.setActivityLayer()
      }
      if (key === 'public') {
        this.setPublicLayer()
      }
    },
    handleSafeRoute(status) { // 打开/关闭逃生路线线
      if (status) {
        this.addSafeRoute()
        this.open_safe_route = false;
      } else {
        this.removeSafeRoute()
        this.open_safe_route = true;
      }
    },
    handleNavPopup() {
      this.show_nav_popup = !this.show_nav_popup
    },
    positionMarker(position = [120.587519, 31.315924]) {
      // 点击后创建自定义信息窗口
      this.setInfoWindows(position)
      // 把地图中心点设置为当前点击的标记点
      this.map.setZoomAndCenter(this.zoom, position);
      //
      this.show_nav_popup = false;
      // 禁止缩放
      this.map.setStatus({
        zoomEnable: false
      });
    },
    setInfoWindows(position) {
      // 此时需要把组件的样式设置为可见
      this.showInfoWindow = true
      // 设置marker头部的标题信息窗口
      const infoWindow = new AMap.InfoWindow({
        // 使用自定义窗体
        isCustom: true,
        // 只有当组件渲染完毕后，通过$el才能拿到原生的dom对象
        content: this.$refs['infoWindow'].$el,
        // 设置定位偏移量
        offset: new AMap.Pixel(0, -30),
      })
      this.infoWindow = infoWindow;
      this.infoWindowTitle = 'xxxx'
      // 信息窗口打开
      infoWindow.open(this.map, position)
    }

  }
}
</script>

<style lang="less">
#container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
}

/* 标记文字样式 */
.amap-marker-label {
  padding: 0.25rem 0.5rem;
  width: auto;
  border: none;
  border-radius: 2px;
  background: rgba(86, 65, 23, 0.8);
  color: white;
}

.amap-marker {
  .amap-icon {
    margin-top: 0.25rem;
  }
}

.input-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-color: #fff;
  background-clip: border-box;
  border-radius: .25rem;
  width: 20rem;
  border-width: 0;
  border-radius: 0.4rem;
  box-shadow: 0 2px 6px 0 rgba(114, 124, 245, .5);
  position: fixed;
  top: 4rem;
  right: 1rem;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  padding: 0.75rem 1.25rem;
}

.tool-bar-wrapper {
  position: absolute;
  left: 20px;
  bottom: 8rem;
  width: 20px;
}

.nav-bar-wrapper {
  position: fixed;
  bottom: 0;
  left: 0;
  height: 4.5rem;
  width: 100%;
  background-color: white;
  text-align: center;
  box-shadow: 0 -1px 0 rgba(80, 80, 80, 0.1);
  z-index: 999;
  padding: 0.5rem 0;
  .item {
    padding-top: 0.5rem;
    color: #888;
  }

  .checked {
    color: #965f13;
  }
}

.safe-route-wrapper {
  position: absolute;
  bottom: 2rem;
  right: 1rem;
  background-color: white;
}

.operate-bar-wrapper {
  position: absolute;
  right: 20px;
  top: 5%;
  width: 20px;
  height: auto;
  z-index: 100;

  .box-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    .item {
      text-align: center;
      font-size: 0.85rem;
      width: 2rem;
      height: 2rem;
      background-color: white;
      margin-bottom: 1rem;
      border-radius: 1px;
      padding: 2.5px;
    }
  }
}

.popup-wrapper {
  margin-top: 1rem;

  .title {
    font-size: 1.25rem;
    margin-bottom: 0.85rem;
  }

  .content {
    line-height: 1.75;
    font-size: 0.95rem;
  }
}


.hideScrollBar::-webkit-scrollbar {
  display: none;
}

.hideScrollBar {
  -ms-overflow-style: none;
  overflow: -moz-scrollbars-none;
}

.van-dialog__confirm, .van-dialog__confirm:active {
  color: #AB8F57;
}
</style>