功能点

• 地图的初始化
• 显示电子围栏（先初始化在调接口显示电子围栏）
• 显示定位
• 显示轨迹
• 轨迹回放 （回放速度无法控制是因为高德地图的版本问题，不要设置版本，使用默认的即可生效）
• 获取当前城市及天气情况
• 设置地图样式
• 坐标拾取器

重点

• 默认当前城市

• 地图加载完成的生命周期

 this.map.on('complete', () => {
   })

• 清除地图上所有图形（若不想清除电子围栏，可以全部清除后重新显示电子围栏）

this.map.clearMap();

• 自动适配到合适视野范围（无参数，默认包括所有覆盖物的情况）

this.map.setFitView();

• 设置地图中心点
• 下拉框和时间选择框样式的修改

this.map.setCenter([point.longitude, point.latitude]); 

<template>
  <div class="w100 h100 white relative">
    <!-- 地图区域 -->
    <div id="container" class="w100 h100"></div>
    <!-- 搜索框 -->
    <div class="absolute" style="left: .2rem; top: .5rem;z-index: 9; ">
      <div class="bg-com white pdRem-20 sizeRem-30">
        <div class="bold w100">
          <div class="item pdRem-20">正在监测人员：共{
   {
    olderArr.length }}人</div>
          <div class="item pdRem-20">
            护理院
            <el-select v-model="info.orgId" class="w100 mtRem-20" @change="changeOrgId" :popper-append-to-body="false"
              :teleported="false">
              <el-option v-for="item in roomArr" :key="item.id" :label="item.label" :value="item.id"></el-option>
            </el-select>
          </div>
          <div class="item pdRem-20">
            老人姓名
            <el-select v-model="info.syncUserId" class="w100 mtRem-20" filterable :filter-method="remoteMethod"
              :popper-append-to-body="false" :teleported="false">
              <el-option v-for="item in olderArr" :key="item.syncUserId" :label="item.userName"
                :value="item.syncUserId"></el-option>
            </el-select>
          </div>
          <div class="item pdRem-20">
            <div class="mbRem-20">开始时间</div>
            <el-date-picker v-model="info.dateRange" @change="handleDateRange" style="width: 100%;" type="datetimerange"
              range-separator="" start-placeholder="开始日期" end-placeholder="结束日期" align="right"
              popper-class="popperClass-my" class="picker" :popper-append-to-body="false">
            </el-date-picker>
          </div>
          <div class="item pdRem-20">
            <el-tag class="btn-time" @click="getTime(0)">当天</el-tag>
            <el-tag class="btn-time mlrRem-20" @click="getTime(3)">近3天</el-tag>
            <el-tag class="btn-time" @click="getTime(7)">近7天</el-tag>
          </div>
        </div>
        <!-- 按钮 -->
        <div class="center mtRem-80">
          <el-button size="medium" class="block btn-bg" @click="submit(1)">实时定位</el-button>
          <el-button size="medium" class="block mlRem-40 btn-bg" @click="submit(2)">轨迹回放</el-button>
        </div>
      </div>
    </div>
    <!-- 告警 -->
    <div class="absolute" style="right: 1.5rem; top: .5rem;z-index: 9; ">
      <div v-for="(alarmInfo, index) in alarmList" :key="index" class="item-bg pdRem-30 sizeRem-26">
        <div class="flex_r"><el-tag type="warning" effect="dark" size="mini">{
   {
    alarmInfo.alarmLevelName }}</el-tag>
        </div>
        <div class="flex1">
          <div style="width: 90%;">
            <div class="">{
   {
    alarmInfo.alarmContent }}</div>
          </div>
          <div style="width:10%">
            <img :src="require('./components/img/alarm-icon.png')" alt="" style="width:0.4rem;height: 0.4rem;">
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
    selectCompanyList, userInfoList, fenceList, userLocation, trajectory } from './components/js/api'

import AMapLoader from '@amap/amap-jsapi-loader';
import redIcon from "./components/img/point-red1.png";
import originIcon from "./components/img/origin.png";
import endIcon from "./components/img/end.png";
import olderManIcon from "./components/img/olderMan.png";
window._AMapSecurityConfig = {
   
  securityJsCode: "bc0077d71423eedb1d25df186610f740",
};
export default {
   
  props: ['alarmList'], //告警列表
  data() {
   
    return {
   
      isOrgId: true, //true是卫健委账号  fase机构账号
      map: null,
      trackLineArr: [],
      fenceArr: [], //电子围栏数据
      // 搜索框
      num: 0,
      info: {
   
        orgId: '',
        syncUserId: '',
        dateRange: [],
      },
      roomArr: [],//护理院-下拉
      olderArr: [],//老人-下拉
      olderArrCopy: [],//老人-下拉
    }
  },
  watch: {
   
    "info.dateRange"(newVal) {
   
      if (newVal == null) {
   
        this.info.dateRange = [];
      }
    },
  },

  mounted() {
   
    console.log('mounted', 33333333333)
    this.isOrgId = localStorage.getItem("isOrgId") == 'true' ? true : false;
    this.initAMap();
  },
  beforeDestroy() {
   
    this.map.destroy()