vue中使用高德地图

1. npm install amap --save

2. 在index.html中写入

<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.4&key=f447aabbe4424273395c076040a34b9e&plugin=AMap.Geocoder&plugin=AMap.Autocomplete&plugin=AMap.PolyEditor"></script>

3. vue.config.js中写入

configureWebpack: {
  externals: {
    "AMap": "AMap"
  }
}
解决AMap报错：AMap undefined报错

4. 新建myMap.vue

<template>
  <div>
    <div id="mapContainer"></div>
  </div>
</template>

<style>
#mapContainer {
  width: 500px;
  height: 500px;
  background-color: #ffffff;
  margin: 50px;
}
</style>
<script>
import AMap from "AMap";

export default {
  data() {
    return {
      infoWindow: ""
    };
  },
  mounted() {
    this.showMap();
  },
  methods: {
    showMap() {
      let map = new AMap.Map("mapContainer", {
        resizeEnable: true,
        center: [104.037969, 30.521942],
        zoom: 13
      });

      // 坐标点
      let marker = new AMap.Marker({
        position: new AMap.LngLat(104.037969, 30.521942), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
        title: "北京"
      });

      // 将创建的点标记添加到已有的地图实例：
      map.add(marker);
      // 同时引入工具条插件，比例尺插件和鹰眼插件
      AMap.plugin(
        [
          "AMap.ToolBar",
          "AMap.Scale",
          "AMap.OverView",
          "AMap.MapType",
          "AMap.Geolocation"
        ],
        function() {
          // 在图面添加工具条控件，工具条控件集成了缩放、平移、定位等功能按钮在内的组合控件
          map.addControl(new AMap.ToolBar());

          // 在图面添加比例尺控件，展示地图在当前层级和纬度下的比例尺
          map.addControl(new AMap.Scale());

          // 在图面添加鹰眼控件，在地图右下角显示地图的缩略图
          map.addControl(new AMap.OverView({ isOpen: true }));

          // 在图面添加类别切换控件，实现默认图层与卫星图、实施交通图层之间切换的控制
          map.addControl(new AMap.MapType());

          // 在图面添加定位控件，用来获取和展示用户主机所在的经纬度位置
          map.addControl(new AMap.Geolocation());
        }
      );
　　　　// 这里是信息窗体，不需要可以删除
      this.infoWindow = new AMap.InfoWindow({
        isCustom: true, //使用自定义窗体
        content: this.createInfoWindow("服务区", ""),
        offset: new AMap.Pixel(16, -25)
      });
      marker.on("mouseover", e => {
        this.infoWindow.setContent(
          this.createInfoWindow(e.target.name,)
        );
        // console.log('markerMouseOver',e)
        this.infoWindow.open(map, e.target.getPosition());
      });
      // marker.on("mouseout", e => {
      //   map.clearInfoWindow();
      // });
      marker.on("click", e => {
        console.log(111, e);
        this.infoWindow.setContent(
          this.createInfoWindow(e.target.name,)
        );
      });
      marker.emit("click", { target: marker });
    },

    // 自定义信息窗体
    createInfoWindow() {
      let info ='<div>\n' +
        '    <el-card class="box-card" style="padding: 0 80 30 80;width: 400px;border-radius: 10px;">\n' +
        '      <div id="del-div">\n' +
        '        <el-link type="primary" icon="el-icon-close" @click="close()"></el-link>\n' +
        '      </div>\n' +
        '      <div style="text-align: center;">\n' +
        '        <h4>详 情</h4>\n' +
        '      </div>\n' +
        '      <p v-if="isInfo">部署 : 测试一下</p>\n' +
        '      <p v-if="isInfo">地点 : 测试一下2222</p>\n' +
        '      <p v-if="isInfo">说明 : 测试一下111111</p>\n' +
        '      <p v-if="!isInfo" style="text-align: center;color: #b3b3b3;">暂无信息</p>\n' +
        '      <div id="infoWindowTool">\n' +
        '        <el-link type="primary" @click="edit()">编辑</el-link>\n' +
        '        <el-link type="primary" @click="del()">删除</el-link>\n' +
        '      </div>\n' +
        '    </el-card>\n' +
        '    <div class="amap-info-sharp">\n' +
        '      <i class="el-icon-caret-bottom"></i>\n' +
        '    </div>\n' +
        '  </div>'
      return info;
    },
    initialize(e) {
      this.overlay = e.overlay;
      this.infoWindow = e.infoWindow;
    },
    //关闭
    close() {
      this.infoWindow.close();
    },
    edit() {
      console.log("编辑按钮测试");
    },
    del() {
      console.log("删除按钮测试");
    }
  }
};
</script>
<style>
.position_amap .amap-simple-marker-def-style .amap-simple-marker-label {
  line-height: 120px;
  width: 400px;
  height: 60px;
  text-align: left;
}
.amap-info-sharp {
  bottom: -1px;
  left: 48.5%;
  position: absolute;
  color: #fff;
  z-index: -1;
}
#del-div {
  position: absolute;
  right: 20px;
  top: 20px;
  transform: scale(1.2);
}
</style>

<template>
  <div>
    <div id="mapContainer"></div>
  </div>
</template>

<style>
#mapContainer {
  width: 670px;
  height: 494px;
  background-color: #ffffff;
}
</style>
<script>
import AMap from "AMap";

export default {
  props: {
    mapInfo: {
      type: Object,
      default: () => {
        return {
          remark: "靖江******公司",
          contactMobile: "0512-888888",
          contactAddress: "江苏省*******"
        };
      }
    },
    center: {
      type: Array,
      default: () => [120.437223, 32.088997]
    }
  },
  data() {
    return {
      infoWindow: ""
    };
  },
  mounted() {
    this.showMap();
  },
  methods: {
    showMap() {
      let map = new AMap.Map("mapContainer", {
        resizeEnable: true,
        center: this.center,
        zoom: 13
      });

      // 坐标点
      let marker = new AMap.Marker({
        // position: new AMap.LngLat(this.center[0], this.center[1]), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
        position: this.center,
        title: this.mapInfo.remark,
        iconStyle: "red"
      });

      // 将创建的点标记添加到已有的地图实例：
      map.add(marker);
      // 同时引入工具条插件，比例尺插件和鹰眼插件
      AMap.plugin(
        [
          "AMap.ToolBar",
          "AMap.Scale",
          "AMap.OverView",
          "AMap.MapType",
          "AMap.Geolocation"
        ],
        function() {}
      );

      this.infoWindow = new AMap.InfoWindow({
        isCustom: true, //使用自定义窗体
        content: this.createInfoWindow(),
        offset: new AMap.Pixel(16, -25)
      });
      this.infoWindow.setContent(this.createInfoWindow());
      this.infoWindow.open(map, marker.getPosition());
    },

    // 自定义信息窗体
    createInfoWindow() {
      let info =
        "<div class='info'>" +
        '    <el-card class="box-card" style="padding: 0 80 30 80;width: 400px;border-radius: 10px;">' +
        '      <h4>'+this.mapInfo.remark+'</h4>' +
        '      <p><i class="el-icon-map-location"></i>位置：<span class="position">'+this.mapInfo.contactAddress+'</span></p>' +
        '      <p><i class="el-icon-phone-outline"></i>电话：<span class="tel">'+this.mapInfo.contactMobile+'</span></p>' +
        "    </el-card>" +
        "  </div>";
      return info;
    }
  }
};
</script>
<style lang="scss">
.position_amap .amap-simple-marker-def-style .amap-simple-marker-label {
  line-height: 120px;
  width: 670px;
  height: 60px;
  text-align: left;
}
#mapContainer {
  .amap-logo,.amap-copyright{
    display: none!important;
  }
  .info {
    background: #fff;
    width: 340px;
    height: 110px;
    padding: 16px;
    h4 {
      font-size: 18px;
      font-weight: 700;
      text-align: center;
    }
    p {
      font-size: 16px;
      text-align: left;
      text-indent: 0;
      line-height: 20px;
      margin-top: 10px;
    }
  }
}
</style>