直播系统基于Vue的高德地图组件

<template>
  <div class="tmap">
    <div class="btn">
      <button @click="change2D">2D视图</button>
      <button @click="change3D">3D视图</button>
      <button @click="moveToLocal">平移</button>
      <button @click="createInfoWindows">开启信息窗口</button>
      <button @click="destroyedInfoWindows">关闭信息窗口</button>
      <div>
        <input id="tipinput" type="text" placeholder="请输入地名" v-model="keywords" />
        <button @click="searchEvent">搜索</button>
      </div>
    </div>
    <div class="map" id="amap-container" ref="tmap" style="width:100%;height:400px"></div>
  </div>
</template>

<script>
export default {
  name: "TMap",
  data() {
    return {
      map: {},
      center: {},
      AMap: {},
      marker: null,
      keywords: "",
      infoWindow: {},
      placeSearch: {},
      hotspotoverEvent: {},
      auto: {}
    };
  },
  props: {
    aMapKey: {
      default: "85c467ada7b08d4b909e233d37e2d7bb",
      type: String
    }
  },
  mounted() {
    this.loadScript(() => {
      this.initTMap();
    });
  },
  methods: {
    // 初始化地图
    // 这里参数有默认值
    // 如果不传按照默认值 渲染
    initTMap(
      ViewMode = "3D",//3d模式 
      resizeEnable = true,
      rotateEnable = true,
      pitchEnable = true,
      pitch = 43.5//斜角
    ) {
      this.AMap = window.AMap;//把AMap对象挂载在当前组件内
      let defaultCenter = [102.66665434472793, 25.031639292195205];//初始化地图中心
      this.map = new this.AMap.Map("amap-container", { //初始化地图
        center: defaultCenter,
        zoom: 17,
        isHotspot: true,
        viewMode: ViewMode, //开启3D视图,默认为关闭
        buildingAnimation: true, //楼块出现是否带动画
        resizeEnable: resizeEnable,
        rotateEnable: rotateEnable,
        pitchEnable: pitchEnable,
        pitch: pitch
      });
      // 地图是否加载完成回调
      this.loadedMap(() => {
        // 加载地图插件
        this.createAMapPlugins();
        // 创建markeer
        this.createMarker();
        // 监听地图点击事件
        this.map.on("click", e => {
          // 获取点击的位置
          let clickPoint = [e.lnglat.getLng(), e.lnglat.getLat()];
          // 把地图中心移动到当前点击的位置
          this.moveToLocal(clickPoint);
        });
      });
    },
    // 创建marker
    createMarker(point) {
      this.marker = new this.AMap.Marker({
        icon: "https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png",
        position: point
      });
      // 把marker添加到地图上
      this.map.add(this.marker);
    },
    // 关闭提示信息狂
    destroyedInfoWindows() {
      // 移除hotspotver事件
      this.AMap.event.removeListener(this.hotspotoverEvent);
      // 关闭提示框
      this.infoWindow.close();
    },
    // 创建提示信息框
    createInfoWindows() {
      // 添加hotspotover事件
      this.hotspotoverEvent = this.AMap.event.addListener(
        this.map,
        "hotspotover",
        result => {
          // 搜索当前位置信息
          this.placeSearch.getDetails(result.id, (status, result) => {
            if (status === "complete" && result.info === "OK") {
              this.placeSearch_CallBack(result);
            }
          });
        }
      );
    },
    // 转换当前地图信息
    placeSearch_CallBack(data) {
      //infoWindow.open(map, result.lnglat);
      window.console.log(data);
      let poiArr = data.poiList.pois;
      let location = poiArr[0].location;
      // 设置信息
      this.infoWindow.setContent(this.createContent(poiArr[0]));
      // 打开地图
      this.infoWindow.open(this.map, location);
    },
    // 创建窗体
    createContent(poi) {
      //信息窗体内容
      let s = [];
      s.push(
        '<div class="info-title">' +
          poi.name +
          '</div><div class="info-content">' +
          "地址：" +
          poi.address
      );
      s.push("电话：" + poi.tel);
      s.push("类型：" + poi.type);
      s.push("<div>");
      return s.join("<br>");
    },
    // 地图加载完成回调函数
    loadedMap(cb) {
      this.map.on("complete", () => {
        // 地图图块加载完成后触发
        cb && cb();
      });
    },
    // 加载地图插件
    createAMapPlugins() {
      // &plugin=AMap.PlaceSearch,AMap.AdvancedInfoWindow
      this.AMap.plugin(
        [
          "AMap.ToolBar",//工具栏插件
          "AMap.PlaceSearch",//搜索插件
          "AMap.AdvancedInfoWindow",//信息框插件
          "AMap.Autocomplete"//输出提示插件
        ],
        () => {
          //异步加载插件
          let toolbar = new this.AMap.ToolBar();
          // 把工具栏添加到地图上
          this.map.addControl(toolbar);
          this.placeSearch = new this.AMap.PlaceSearch(); //构造地点查询类
          // 创建信息框
          this.infoWindow = new this.AMap.AdvancedInfoWindow({
            retainWhenClose: true
          });
        }
      );
    },
    // 移动
    moveToLocal(point) {
      // 判断当前地图上是否有marker有的话删除
      if (this.marker != null) {
        this.map.remove(this.marker);
        this.marker = null;
      }
      // 创建marker
      this.createMarker(point);
      // 平滑移动地图
      this.map.panTo(point);
    },
    // 搜索
    searchEvent() {
      // 创建提示信息
      this.auto = new this.AMap.Autocomplete({
        input: "tipinput"
      });
      // 获取当前输入框内容
      let keys = document.getElementById("tipinput").value;
      this.keywords = keys;
      // 搜索当前输入框内容相关地点
      this.auto.search(this.keywords, (status, result) => {
        console.log(status, result);
        // 移动到第一个点位置
        this.moveToLocal([
          result.tips[0].location.lng,
          result.tips[0].location.lat
        ]);
      });
    },
    // 创建信息窗口
    // 2d视角
    change2D() {
      this.map.destroy();
      this.initTMap("2D");
    },
    // 3D视角
    change3D() {
      this.map.destroy();
      this.initTMap();
    },
    // 加载高德地图api
    loadScript(callback) {
      var script = document.createElement("script");
      script.type = "text/javascript";
      script.src = `https://webapi.amap.com/maps?v=1.4.15&key=${this.aMapKey}`;

      document.body.appendChild(script);
      if (script.readyState) {
        //IE
        //这里只有反人类设计的IE才有
        script.onreadystatechange = function() {
          if (
            script.readyState == "complete" ||
            script.readyState == "loaded"
          ) {
            script.onreadystatechange = null;
            //callback&&callback()是判断传入的回调函数是不是空的如果是空的就不执行，如果不是空的就执行
            callback && callback();
          }
        };
      } else {
        //非IE
        script.onload = function() {
          callback && callback();
        };
      }
    }
  },
  destroyed() {
    this.map.destroy();
  }
};
</script>

<style>
.info-title {
  font-weight: bolder;
  color: #fff;
  font-size: 14px;
  line-height: 26px;
  padding: 0 0 0 6px;
  background: #25a5f7;
}
.info-content {
  padding: 4px;
  color: #666666;
  line-height: 23px;
  font: 12px Helvetica, "Hiragino Sans GB", "Microsoft Yahei", "微软雅黑", Arial;
}
.info-content img {
  float: left;
  margin: 3px;
}
.amap-info-combo .keyword-input {
  height: auto;
}
</style>