下面是一些vue-amap的簡(jiǎn)單例子，下載和引入這里就不多說(shuō)了髓霞。

文檔

直接上代碼，把以下代碼復(fù)制進(jìn)去即可查看效果强戴，親測(cè)有效责鳍。

<template>
  <div id="app">
    <div class="amap-page-container">
      <div class="toolbar">當(dāng)前坐標(biāo): {{ lng }}, {{ lat }}</div>
      <el-amap
        vid="amapDemo"
        :center="center"
        :zoom="zoom"
        :plugin="plugin"
        class="amap-demo"
        :events="events"
        pitch-enable="false"
      >
        <el-amap-marker
          v-for="(marker,index) in markers"
          :key="index"
          :events="marker.events"
          :position="marker.position"
        />
        <el-amap-info-window
          v-if="window"
          :position="window.position"
          :visible="window.visible"
          :content="window.content"
          :offset="window.offset"
          :close-when-click-map="true"
          :is-custom="true"
        >
          <div id="info-window">
            <p>{{ window.address }}</p>
            <div class="detail" @click="checkDetail">查看詳情</div>
          </div>
        </el-amap-info-window>
      </el-amap>
    </div>
  </div>
</template>
    
<script>
export default {
  name: "AmapPage",
  data: function () {
    const self = this;
    return {
      data: [
        {
          position: "113.645422, 34.730936",
          address: "另一個(gè)地址",
        },
        {
          position: "113.685313,34.746453",
          address: "一個(gè)地址",
        },
      ],
      zoom: 10,
      center: [113.645422, 34.730936],
      markers: [],
      windows: [],
      window: "",
      events: {
        click(e) {
          const { lng, lat } = e.lnglat;
          self.lng = lng;
          self.lat = lat;
        },
      },
      lng: 0,
      lat: 0,

      /*一些工具插件*/

      plugin: [
        {
          pName: "DistrictSearch",
          events: {
            init(o) {
              console.log(o);
            },
          },
        },
        {
          // 定位
          pName: "Geolocation",
          events: {
            init(o) {
              // o是高德地圖定位插件實(shí)例
              o.getCurrentPosition((status, result) => {
                if (result && result.position) {
                  // 設(shè)置經(jīng)度
                  self.lng = result.position.lng;
                  // 設(shè)置維度
                  self.lat = result.position.lat;
                  // 設(shè)置坐標(biāo)
                  self.center = [self.lng, self.lat];
                  self.markers.push([self.lng, self.lat]);
                  // load
                  self.loaded = true;
                  // 頁(yè)面渲染好后
                  self.$nextTick();
                }
              });
            },
          },
        },
        {
          // 工具欄
          pName: "ToolBar",
          events: {
            init(instance) {
              // console.log(instance);
            },
          },
        },
        {
          // 鷹眼（暫且沒(méi)用到）
          pName: "OverView",
          events: {
            init(instance) {
              // console.log(instance);
            },
          },
        },
        {
          // 地圖類型
          pName: "MapType",
          defaultType: 0,
          events: {
            init(instance) {
              // console.log(instance);
            },
          },
        },
        {
          // 搜索（暫且沒(méi)用到）
          pName: "PlaceSearch",
          events: {
            init(instance) {
              // console.log(instance)
            },
          },
        },
      ],
    };
  },
  mounted() {
    this.point();
  },
  methods: {
    point() {
      const markers = [];
      const windows = [];
      const that = this;
      this.data.forEach((item, index) => {
        markers.push({
          position: item.position.split(","),
          // icon:item.url, //不設(shè)置默認(rèn)藍(lán)色水滴
          events: {
            click() {
              // 方法：鼠標(biāo)移動(dòng)到點(diǎn)標(biāo)記上，顯示相應(yīng)窗體
              that.windows.forEach((window) => {
                window.visible = false; // 關(guān)閉窗體
              });
              that.window = that.windows[index];
              that.$nextTick(() => {
                that.window.visible = true;
              });
            },
          },
        });
        windows.push({
          position: item.position.split(","),
          isCustom: true,
          offset: [115, 55], // 窗體偏移
          showShadow: false,
          visible: false, // 初始是否顯示
          address: item.address,
        });
      });
      //  加點(diǎn)
      this.markers = markers;
      // 加彈窗
      this.windows = windows;
    },
    checkDetail() {
      alert("點(diǎn)擊了查看詳情");
    },
  },
};
</script>
    
<style scoped>
.amap-demo {
  height: 120vh;
}

.amap-page-container {
  position: relative;
}

#info-window {
  width: 211px;
  height: 146px;
  margin-left: 30px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 4px;
  position: relative;
  overflow: hidden;
}

.detail {
  width: 100%;
  height: 24px;
  color: #fff;
  background-color: #1a73e8;
  position: absolute;
  bottom: 0;
  font-size: 12px;
  line-height: 24px;
  text-align: center;
  cursor: pointer;
}
</style>