由于公司要求需要临时做个demo，需要做个引入高德地图的demo。时间也比较紧，废话不多说了。
首先，我们先来看看图片的效果!

185909571ffc9350711b093bc9042ed.jpg

然后我们来看看代码的实现,项目使是用vue+ts写的，如果不需要ts就把定义的类型删掉即可

<div class="map" :style="{width:'100%',height:'50vh'}">
      <el-amap vid="amapDemo" :mapStyle="mapStyle" :zoom="zoom" :center="center" class="amap-demo">
        <el-amap-marker
          v-for="(marker, index) in markers"
          :key="index"
          :position="marker.position"
          :events="marker.events"
          :visible="marker.visible"
          :draggable="marker.draggable"
          :icon="marker.icon"
        ></el-amap-marker>
        <el-amap-info-window
          v-if="window"
          :position="window.position"
          :visible="window.visible"
          :content="window.content"
          :offset="window.offset"
        ></el-amap-info-window>
      </el-amap>
    </div>

  zoom: any = 14;
  center: any[] = [121.539693, 31.126667];
  mapStyle: any = "amap://styles/grey"; //这个是主题色的设置，grey可以替换成其他主题色
  windows: any[] = [];
  markers: any[] =[]
  window: any = "";
  pointMarker: any[] = [
    {
      lng: 121.536477,
      lat: 31.126924,
      url: require("@/assets/images/normal.png"),
      text: '111'
    },
    {
      lng: 121.548097,
      lat: 31.125337,
      url: require("@/assets/images/normal.png"),
      text: '222'
    },
    {
      lng: 121.536306,
      lat: 31.124464,
      url: require("@/assets/images/normal.png"),
      text: '333'
    }
  ]

//main.js
import AMap from 'vue-amap';
Vue.use(AMap);
  // 初始化vue-amap
AMap.initAMapApiLoader({
  // 高德key
  key: 'b84ff15dce4a805bf9d127aec5e6ea01',
  // 插件集合 （插件按需引入）
  plugin: [
    "AMap.Autocomplete", //输入提示插件
    "AMap.PlaceSearch", //POI搜索插件
    "AMap.Scale", //右下角缩略图插件 比例尺
    "AMap.OverView", //地图鹰眼插件
    "AMap.ToolBar", //地图工具条
    "AMap.MapType", //类别切换控件，实现默认图层与卫星图、实施交通图层之间切换的控制
    "AMap.PolyEditor", //编辑 折线多，边形
    "AMap.CircleEditor", //圆形编辑器插件
    "AMap.Geolocation" //定位控件，用来获取和展示用户主机所在的经纬度位置
  ]
});

created() {
    const markers: any = [];
    const windows: any = [];
    // eslint-disable-next-line @typescript-eslint/no-this-alias
    const that = this;
    this.pointMarker.forEach((item: any, index: any) => {
      markers.push({
        position: [item.lng, item.lat],
        icon: item.url,
        events: {
          click() {
            that.windows.forEach((window: any) => {
              window.visible = false; //关闭窗体
            });
            that.window = that.windows[index];
            that.$nextTick(() => {
              that.window.visible = true; //点击点坐标，出现信息窗体
            });
          }
        }
      });
      windows.push({
        position: [item.lng, item.lat],
        content: "<div>" + item.text + "</div>", //内容
        offset: [23, -20], //窗体偏移
        visible: false //初始是否显示
      });
    });
    //  加点
    this.markers = markers;
    //加弹窗
    this.windows = windows;
}

具体的代码实现就这么多,有些plugin插件是需要就加进去，我这里是为了以后方便看。
感谢这篇文章的帮助。https://www.jianshu.com/p/60cde87dfb5b