YFYC-H5/src/views/Goods/components/GoodsMap.vue

<!--  -->
<template>
  <div class="GoodsMap">
    <div class="box">
      <div id="myMap" />
    </div>
  </div>
</template>

<script>
export default {
  name: "GoodsMap",
  components: {},
  data() {
    //这里存放数据
    return {
      keywords: "",
      arr: [],
      map: {
        name: "中江塔",
        x: 118.363387,
        y: 31.325179,
      },
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    initMap() {
      window.onLoad = () => {
        this.map = new AMap.Map("myMap", {
          zoom: 18,
          center: [118.363387, 31.325179],
          // viewMode: '3D'
        });
        const marker = new AMap.Marker({
          position: [118.363387, 31.325179], // 位置
          label: {
            offset: new AMap.Pixel(20, 20),
            content: "点击打开高德地图",
          },
        });
        marker.on("click", function (e) {
          marker.markOnAMAP({
            name: "中江塔",
            position: marker.getPosition(),
          });
        });

        this.map.add(marker); // 添加到地图
        AMap.plugin("AMap.ToolBar", () => {
          // 异步加载插件
          const toolbar = new AMap.ToolBar();
          this.map.addControl(toolbar);
        });
      };

      const url =
        "https://webapi.amap.com/maps?v=1.4.15&key=93f7bfff72aa16305db5aee4f3fd6232&callback=onLoad";

      const jsapi = document.createElement("script");

      jsapi.src = url;

      document.head.appendChild(jsapi);
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() { 
    window.document.title='景点导航'
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.initMap();
  },
  beforeCreate() { }, //生命周期 - 创建之前
  beforeMount() { }, //生命周期 - 挂载之前
  beforeUpdate() { }, //生命周期 - 更新之前
  updated() { }, //生命周期 - 更新之后
  beforeDestroy() { }, //生命周期 - 销毁之前
  destroyed() { }, //生命周期 - 销毁完成
  activated() { }, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='less' scoped>
.GoodsMap {
  width: 100%;
  height: 100%;
  position: relative;

  .box {
    width: 100%;
    height: 100%;
  }

  #myMap {
    width: 100%;
    height: 100%;
  }
  /deep/.amap-marker-label{
    // color: red;
  }
}
</style>