高德地图用vue给窗体事件添加点击事件

如果直接添加调用的话会报 xxxis not defined at HTMLAnchorElement.onclick

HTMLAnchorElement:接口表示超链接元素，并提供一些特别的属性和方法（除了那些继承自普通 HTMLElement对象接口的之外）以用于操作这些元素的布局和显示。
这时HTMLAnchorElement 找不到定义的点击事件 需要初始化的时候加在 window里面

<template>
  <div class="mapmain">
    <van-row>
      <van-col span="12">
        <button
          v-bind:class="[isActive ? 'myorder_active' : 'disActive']"
          @click="xq"
        >
          分公司
        </button>
      </van-col>
      <van-col span="12">
        <button
          v-bind:class="[lsActive ? 'myorder_active' : 'disActive']"
          @click="ly"
        >
          分理处
        </button>
      </van-col>
    </van-row>

    <!-- <div id="pickerBox">
      <input id="pickerInput" placeholder="请输入关键字选取地点" />
      <div id="poiInfo"></div>
    </div> -->
    <div id="container">
      <!-- <div id="centerCoord"></div> -->
    </div>
  </div>
</template>
<script>
import {
  queryCityBranch, //分理处
  queryAreaBr, //分公司
} from "@/api/getData";
import AMap from "AMap"; //在页面中引入高德地图
import AMapUI from "AMapUI";
import { Toast } from "vant";
export default {
  name: "mapmain",
  data() {
    return {
      city: "郑州",
      map: "",
      infoWindow: "",
      isActive: false,
      lsActive: true,
      thisPosition: {
        address: "",
        lng: "",
        lat: "",
        city: "",
        citycode: "",
      },
      flc: [],
    };
  },
  methods: {
    //
    xq() {
      this.flc.length = 0;
      this.isActive = false;
      this.lsActive = true;
      this.getqueryAreaBr();
    },
    ly() {
      this.flc.length = 0;
      this.isActive = true;
      this.lsActive = false;
      this.getqueryCityBranch();
      this.loadmap()
    },
    loadmap() {
      let that = this;
      // 分公司
      if (!this.isActive) {
        // alert(222)
        that.map = new AMap.Map("container",{resizeEnable: true});
      }
      //  分理处
      if (!this.lsActive) {
        that.map = new AMap.Map("container",{resizeEnable: true});
      }
      // that.map.clearMap(); // 清除地图覆盖物
      //构建点坐标  设置点标记的文本标签
      var lnglats = this.flc;
      // console.log(lnglats)
      // 添加一些分布不均的点到地图上,地图上添加三个点标记，作为参照
       var infoWindow = new AMap.InfoWindow({offset: new AMap.Pixel(0, -10)});
      for (var i = 0, marker; i < lnglats.length; i++) {
        let markers =Array.from([lnglats[i].lng,lnglats[i].lat])
        var marker = new AMap.Marker({
            position: markers,
            map: that.map
        });
        // let tel=lnglats[i].tel;
        marker.content =  lnglats[i].name+"<a id='cell' onclick='Phone(window)' style='color: #1d9beb;'>"+lnglats[i].tel +" </a>"+  (lnglats[i].address==null?" ":lnglats[i].address);
        marker.on('click', markerClick);
        marker.emit('click', {target: marker});
    }
     
    //  点击事件
    function markerClick(e) {
        infoWindow.setContent(e.target.content);
        infoWindow.open(that.map, e.target.getPosition());
       
    }
  

    that.map.setFitView();
    },
    // 点击弹出信息
   
  Phone (){
    let val =document.getElementById('cell').innerText;
    window.location.href = 'tel:'+val;
    // console.log(val,"222222")
   },
   
    // 分理处数据加载
    getqueryCityBranch() {
      queryCityBranch().then((res) => {
        // console.log(res.data, "分理处");
        if (res.data.success) {
          let arr = res.data.data;
          let arr2 = [],
            obj = {};
          for (let i = 0; i < arr.length; i++) {
            if (arr[i].lat && arr[i].lng) {
              if (
                arr[i].lat <= 90 &&
                arr[i].lat >= 0 &&
                arr[i].lng <= 180 &&
                arr[i].lng >= 0
              ) {
                // obj.position = [arr[i].lng, arr[i].lat];
                this.flc.push(
                  arr[i]
                );
              }
              // console.log(obj)
              // this.flc.push(obj);
            }
          }
          // console.log(this.flc, "flc分理处");
          this.loadmap(); //加载地图和相关组件
        }
      });
    },
    getqueryAreaBr() {
      queryAreaBr().then((res) => {
        // console.log(res.data, "分公司");
        if (res.data.success) {
          let arr = res.data.data;
          let arr2 = [],
            obj = {};
          for (let i = 0; i < arr.length; i++) {
            if (arr[i].lat && arr[i].lng) {
              if (
                arr[i].lat <= 90 &&
                arr[i].lat >= 0 &&
                arr[i].lng <= 180 &&
                arr[i].lng >= 0
              ) {
                this.flc.push(
                 arr[i]
                );
              }
            }
          }
          // console.log(this.flc, "分公司flc");
          this.loadmap(); //加载地图和相关组件
        }
      });
    },
    //  分公司加载
  },

  created() {},
  mounted() {
    this.getqueryAreaBr();
    let _this = this;
    // console.log(this)
    // window.Close = _this.Close;
    window.Phone=_this.Phone;
    // _this.Phone();
    console.log(window)
  },
};
</script>
<style  lang="less" scoped >
html,
body,
.mapmain {
  width: 100%;
  height: 100%;
}
#container {
  width: 100%;
  height: calc(100% - 2.5rem);
  overflow-y: scroll;
}
.map_text {
  width: 3rem;
  height: 500px;
  /* position: absolute; left: 46px; top: 146px; */
  background: white;
}
#container.amap-icon img {
  width: 25px;
  height: 34px;
}
#pickerBox {
  margin: 0.5rem 0;
  // width: 300px;
  height: 30px;
  line-height: 30px;
  position: relative;
  font-size: 14px;
}
#pickerInput {
  // width: 178px;
  height: 24px;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 0 5px;
  position: absolute;
}
.myorder_active {
  width: 100%;
  height: 2.5rem;
  color: black;
  background: white;
  border: 1px solid #ededed;
}
.disActive {
  width: 100%;
  height: 2.5rem;
  background: #1d9beb;
  border: 1px solid #1d9beb;
  color: #fff;
}
.callPhone{
  background: aqua;
   color:  #1d9beb;
}
</style>