地圖自定義彈窗 高德地圖信息窗體 鼠標點擊地圖點標記顯示彈窗vue

這個例子是使用高德地圖官網自定義信息窗體，非vue-amap封裝的高德地圖組件

vue使用：https://www.cnblogs.com/luckybaby519/p/15706546.html

HTML使用：https://www.cnblogs.com/luckybaby519/p/15703467.html

結果如下圖所示：

 

 具體實現代碼為下：

1.在public的index.html中引入css和js

<link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
  <script src="https://webapi.amap.com/maps?v=1.4.15&key=您申請的key值"></script>//key值不需要加引號

2.構建自定義組件

<template>
  <div>
    <div id="container"></div>
    <div ref="infoData"
         class="custom-info input-card content-window-card">
      <div class="info-top">
        <div><span>{{devInfo.title}}</span>
          <span style="font-size:11px; margin-left:20px;color:#F00;">狀態：{{devInfo.state}}</span>
        </div><img @click="closeInfoWindow"
             src="https://webapi.amap.com/images/close2.gif">
      </div>
      <div class="info-middle"
           style="background-color: white;"><img class="info-img"
             src="img/dev.png"><a class="info-a-title"
           href="https://ditu.amap.com/detail/B000A8URXB?citycode=110105">XXXXXXXXXXXX</a><br>地址：{{devInfo.address}}<br>
        <div class="info-div">總用電：{{devInfo.electricity}} </div><span class="info-span"> 總用氣：{{devInfo.gas}}<br>
          <div class="info-div">發酵罐：{{devInfo.guan}} </div><span class="info-span"> 總用水量：{{devInfo.water}}</span><br>
          <div class="info-div">工作年限：{{devInfo.years}}</div> <span class="info-span"> 總產量：{{devInfo.total}}</span><br>
          <div class="info-div">建廠時間：{{devInfo.time}}</div> <span class="info-span">建築面積：{{devInfo.mianji}}</span>
        </span>
      </div>
      <div class="info-bottom"
           style="position: relative; top: 0px; margin: 0px auto;"><img src="https://webapi.amap.com/images/sharp.png"></div>
    </div>
    <!-- <div class="info">
      點擊地圖上的點標記，打開所添加的自定義信息窗體
    </div> -->
  </div>
</template>
<script>
export default {
  data() {
    return {
      devInfo: {
        title: '',
        icon: '',
        state: '',
        address: '',
        electricity: '',
        gas: '',
        guan: '',
        water: '',
        years: '',
        time: '',
        mianji: '',
      },
      map: null,
      markerData: [
        {
          title: '1號廠區',
          icon: 'img/gc2.png', //點標記圖片路徑
          state: '正常使用',
          address: 'XXXXXXXXXXX',
          electricity: '5428542°',
          gas: '454575NM',
          guan: '210個',
          water: '3235T',
          years: '10年',
          total: '27784T',
          time: '2011.09.08',
          mianji: '1200M3',
          position: [108.971642, 34.247119],
          offset: new AMap.Pixel(-8, -30),
        },
        {
          title: '2號廠區',
          icon: 'img/gc2.png', //點標記圖片路徑
          state: '已廢棄',
          address: 'XXXXXXXXXXXXX',
          electricity: '5428542°',
          gas: '454575NM',
          guan: '210個',
          water: '3235T',
          years: '15年',
          total: '27784T',
          time: '2006.09.08',
          mianji: '1200M3',
          position: [108.9768933198242, 34.24537248278517],
          offset: new AMap.Pixel(-3, -30),
        },
        {
          title: '3號廠區',
          icon: 'img/gc2.png', //點標記圖片路徑
          state: '正常使用',
          address: 'XXXXXXXXXXXX',
          electricity: '5428542°',
          gas: '454575NM',
          guan: '210個',
          water: '3235T',
          years: '10年',
          total: '27784T',
          time: '2011.09.08',
          mianji: '1200M3',
          position: [108.979965, 34.250659],
          offset: new AMap.Pixel(-12, -30),
        },
      ],
    }
  },
  mounted() {
    this.map = this.createMap()
    this.map.clearMap()
    this.addMarker()
  },
  created() {},
  methods: {
    //1.創建map對象
    createMap() {
      //1.地圖初始化時，在地圖上添加marker標記,鼠標點擊marker可彈出自定義的信息窗體
      var mapData = new AMap.Map('container', {
        resizeEnable: true,
        center: [108.9768933198242, 34.24637248278447], //地圖中心點位置
        zoom: 16,
      })
      return mapData
    },
    //2.添加點標記
    addMarker() {
      const self = this

      let arr = []
      this.markerData.forEach((item) => {
        let marker = new AMap.Marker({
          icon: item.icon, //點標記圖片路徑
          position: item.position, //位置
          offset: item.offset, //偏移
        })
        arr.push(
          Object.assign(item, {
            mapId: marker._amap_id,
          })
        )
        marker.setMap(self.map)
        AMap.event.addListener(marker, 'click', (e) => {
          self.markerClick(arr, marker)
        })
      })
    },
    //3.點擊標記 獲取所點擊標記的信息以及窗體要展示的數據，創建信息窗體
    markerClick(arr, marker) {
      let arrNew = arr.filter((x) => x.mapId == marker._amap_id)
      this.devInfo = arrNew && arrNew[0]
      let infoWindow = this.createInfoWindow()
      this.openInfoWindow(infoWindow, marker)
    },
    //4.構建自定義窗體
    createInfoWindow() {
      let infoWindowData = new AMap.InfoWindow({
        isCustom: true, //使用自定義窗體
        content: this.$refs.infoData,
        // content: this.getContent(),
        offset: new AMap.Pixel(16, -45),
      })
      return infoWindowData
    },

    //5.打開窗體
    openInfoWindow(infoWindow, marker) {
      infoWindow.open(this.map, marker.getPosition())
    },
    //6.關閉窗體
    closeInfoWindow() {
      this.map.clearInfoWindow()
    },
  },
}
</script>

<style>
html,
body,
#container {
  height: 100%;
  width: 100%;
}

.content-window-card {
  position: relative;
  box-shadow: none;
  bottom: 0;
  left: 0;
  /* width: auto; */
  width: 28rem;
  padding: 0;
}

.content-window-card p {
  height: 2rem;
}

.custom-info {
  border: solid 1px silver;
}

div.info-top {
  position: relative;
  background: none repeat scroll 0 0 #f9f9f9;
  border-bottom: 1px solid #ccc;
  border-radius: 5px 5px 0 0;
}

div.info-top div {
  display: inline-block;
  color: #333333;
  font-size: 14px;
  font-weight: bold;
  line-height: 31px;
  padding: 0 10px;
}

div.info-top img {
  position: absolute;
  top: 10px;
  right: 10px;
  transition-duration: 0.25s;
}

div.info-top img:hover {
  box-shadow: 0px 0px 5px #000;
}

div.info-middle {
  font-size: 12px;
  padding: 10px 6px;
  line-height: 20px;
}

div.info-bottom {
  height: 0px;
  width: 100%;
  clear: both;
  text-align: center;
}

div.info-bottom img {
  position: relative;
  z-index: 104;
}

/* span {
  margin-left: 5px;
  font-size: 11px;
} */

.info-middle img {
  float: left;
  margin-right: 6px;
}

.info-span {
  /* margin-left: 35px; */
  font-size: 11px;
}

.info-div {
  width: 140px;
  display: inline-block;
  margin-left: 10px;
}

.info-img {
  width: 40px;
  height: 40px;
}

.info-a-title {
  /* color: #000000; */
  font-size: 16px;
}
#container {

/*因為我自己的組件是在一個套了很多層的頁面上使用的，所以這里需要給地圖給一個固定的高，寬是100%可省略不寫，否則地圖會因為它自身的定位而不顯示*/

height: 820px; } #container .amap-icon img, .amap-marker-content img {

width: 64px; height: 64px; } </style>

3.將創建好的組件引入到自己需要展示的地方即可。