bocai_supplyChain_pc/src/components/map.vue

<template>
  <div id="wrap" class="my-map">
    <div id="container"></div>
  </div>
</template>
<script
  type="text/javascript"
  src="https://webapi.amap.com/maps?v=1.4.15&key=44f4591aabba558514366f6e55f8d20e"
></script>
<script>
window._polygon = []; //这些玩意用不着放data里
window._markerList = [];

import AMap from "AMap";

export default {
  // 组件名称
  name: "",
  // 局部注册的组件
  components: {},
  // 组件参数 接收来自父组件的数据
  props: {},
  // 组件状态值
  data() {
    return {};
  },
  // 计算属性
  computed: {},
  // 侦听器
  watch: {},
  // 生命周期钩子   注：没用到的钩子请自行删除
  /**
   * 组件实例创建完成，属性已绑定，但DOM还未生成，$ el属性还不存在
   */
  created() {},
  /**
   * el 被新创建的 vm.el 替换，并挂载到实例上去之后调用该钩子。
   * 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.el 也在文档内。
   */
  async mounted() {
    this.c_center = [
      this.$route.query["lng"] || 121.099038,
      this.$route.query["lat"] || 31.578119,
    ];

    await this.initMap();
  },
  // 组件方法
  methods: {
    initMap() {
      let AMapUI = (this.AMapUI = window.AMapUI);
      let AMap = (this.AMap = window.AMap); //地图对象直接挂到window上
      let mapConfig = {
        zoom: 12,
        center: [121.099038, 31.578119], //沙溪
        crs: "EPSG3857",
        zooms: [10, 20],
        layers: [new AMap.TileLayer.Satellite(), new AMap.TileLayer.RoadNet()],
        resizeEnable: true,
      };

      window.map = new AMap.Map("amapContainer", mapConfig);

      this.addPlugin(map);
      this.getList(true);
    },
    addPlugin(map) {
      AMap.plugin(["AMap.ToolBar", "AMap.Scale", "AMap.MapType"], function () {
        map.addControl(new AMap.ToolBar());
        map.addControl(new AMap.Scale());
        map.addControl(new AMap.MapType());
      });
    },
  },
};
</script>

<style scoped lang="less">
.my-map {
  margin: 0 auto;
  width: 800px;
  height: 640px;
}
.my-map .icon {
  background: url(//a.amap.com/lbs-dev-yuntu/static/web/image/tools/creater/marker.png)
    no-repeat;
}
.amap-container {
  height: 100%;
}
.myinfowindow {
  width: 240px;
  min-height: 50px;
}
.myinfowindow h5 {
  height: 20px;
  line-height: 20px;
  overflow: hidden;
  font-size: 14px;
  font-weight: bold;
  width: 220px;
  text-overflow: ellipsis;
  word-break: break-all;
  white-space: nowrap;
}
.myinfowindow div {
  margin-top: 10px;
  min-height: 40px;
  line-height: 20px;
  font-size: 13px;
  color: #6f6f6f;
}
</style>