vue 引入原生高德地图API

第一步 在index.html中引入

第二步在根目录下创建 vue.config.js 文件

module.exports = {
    configureWebpack: {
      externals: {
        'AMap': 'AMap',
        'AMapUI': 'AMapUI'
         }
    }
  };

<template>
  <div class="home">
    <div id="container" style="width:100%;height:600px"></div>
  </div>
</template>

<script>
export default {
  name: "Home",
  data() {
    return {
      map: null, //地图w
      infowindowL: null, //信息窗体
      list: [ //数据j
         {
          lng: 121.5273285,
          lat: 31.25515044,
          url: "../assets/img/student.png",
          title: "测试啊",
          name: "李逍遥",
          tel: "13762155556",
          id: "1",
          path: [
            [121.5389385, 31.21515044],
            [121.5389385, 31.29615044],
            [121.5273285, 31.21515044],
            [121.5273285, 31.25515044]
          ]
        },
        {
          lng: 121.536488,
          lat: 31.226337,
          url: "../assets/img/student.png",
          name: "景天",
          tel: "1376215555",
          id: "2",
          path: [
            [121.536488, 31.226337],
            [121.5389385, 31.21515044],
            [121.5389385, 31.29615044],
            [121.5273285, 31.21515044],
            [121.5273285, 31.25515044]
          ]
        }
      ]
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    //第一步创建地图
    init() {
      this.map = new AMap.Map("container", {
        zoom: 11, //级别
       resizeEnable: true
      });
      this.addsvgmarker();
    },
    //第二步引入水滴ui组件
    addsvgmarker() {
      AMapUI.loadUI(["overlay/SvgMarker"], SvgMarker => {
        if (!SvgMarker.supportSvg) {
          //当前环境并不支持SVG，此时SvgMarker会回退到父类，即SimpleMarker
          alert("当前环境不支持SVG");
        }
        //创建一个水滴状的shape
        var shape = new SvgMarker.Shape.WaterDrop({
          height: 20, //高度
          width: 20, //不指定,维持默认的宽高比
          fillColor: "#fff" //填充色
        });
        //利用该shape构建SvgMarker
        //显示多个marker在这里进行循环
        this.list.forEach(item=>{
          console.log(item)
          let svgmarker = new SvgMarker(shape, {
            zIndex: 120,
            map: this.map,
            position: [item.lng,item.lat],
            zoomToAccuracy: true, //定位成功后是否自动调整地图视野到定位点
            // showPositionPoint: true,
            //marker图标
            iconLabel: {
              innerHTML: `<div class="maker-layout-student"></div>`,
              style: {
                color: "#fff"
              }
            }
          });
        this.addInfowindow(svgmarker);
        this.map.setFitView();// 无参数，视野默认包括所有覆盖物的情况
        })
      });
    },
    //第三步构建信息窗体
    addInfowindow(marker) {
      //shape点击事件
      AMap.event.addListener(marker, "click", e => {
        console.log("点击了");
        this.infoWindow = new AMap.InfoWindow({
          //创建信息窗体
          // isCustom: true, //使用自定义窗体
          content: this.infocontent(), //信息窗体的内容可以是任意html片段
          offset: new AMap.Pixel(6, -30)
        });
        this.infoWindow.open(this.map, e.target.getPosition());
      });
    },
    //第四步构建窗体内容
    infocontent() {
      return `
        <div style:"background:white">测试</div>
        <div style:"background:white">测试</div>
        <div style:"background:white">测试</div>
        <div style:"background:white">测试</div>
        <div style:"background:white">测试</div>
        <img class="map-facility-img" src="${require('../assets/timg.png')}" alt />
      `;
    }
  }
};
</script>
<style scoped>
/deep/.maker-layout-student {
  width: 30px;
  height: 30px;
  border-radius: 100%;
  background-repeat: no-repeat;
  background-size: 100%;
  background-image: url("../assets/timg.png");
}
/deep/.map-facility-img{
  width: 50px;
  height: 50px;
}
</style>