vue之使用高德地圖(v-amap)自定義infoWindow信息窗體

emmmm~由於項目中需要信息窗體（如下效果圖），官方信息窗體的demo是html的，百度查了好久Vue實現infoWindow，有些是代碼不全，有些不方便直接使用，所以自己整理了一下代碼，方便以后項目使用，要是能幫助到更多人的人就更好了，這也是我寫博客的初衷：記錄自己的成長歷程......

官方網址：https://lbs.amap.com/demo/javascript-api/example/infowindow/custom-style-infowindow/

 

我想要的效果圖：

 

 

 

步驟：

1.定義容器

 

 

2.在 data() 定義變量

 

 

3.定義方法，並在moundted()里面調用

 

 

 

全部代碼：

(高亮展示的都是信息窗體代碼 樣式你們自己設置吧 我就不貼代碼了)

<template>
　　　　<div class="aboutMap">
          <el-amap vid="amapDemo" :zoom="zoom" :center="center" style="height: 500px;">
            <el-amap-marker
              v-for="marker in markers"
              :position="marker.position"
              :events="marker.events"
              :key="marker.index"
            ></el-amap-marker>
            <el-amap-info-window
              v-for="window in windows"
              :offset="window.offset"
              :position="window.position"
              :content="window.content"
              :open="window.open"
              :key="window.index"
            ></el-amap-info-window>
          </el-amap>
        </div>

</template>

export default {
  data() {
    return {
      unit: "XXX國際辦公大樓",
      address: "**省**市**區**********路289號"
    }
  }
},
 mounted() {
    this.initMap();
  },
methods:{
     // 初始化地圖
    initMap(map) {
      this.markers.push({
        position: [113.20062, 33.76721]
      });

      // 地圖信息窗體
      this.windows.push({
        position: [116.307629, 40.058359],
        content:
          "<h2 style='font-weight: bold;width: 400px;margin: 10px'>" +
          this.unit +
          "</h2>" +
          "<div style='margin: 10px'>" +
          "地址：" +
          this.address +
          "</div>",
        offset: [0, -20],
        open: true
      });

      
    }

}

 

效果圖在最上面！！

↑↑ 以上就是窗體信息的全部內容啦~

 

 

 

 

項目中這段數據渲染也挺有意思的，貼一下代碼吧~ 記錄一下

 

    // 獲取數據
    getData() {
      this.apis.api.getContactUsDatas().then(res => {
        if (res.data.code == "01") {
          let datas = res.data.dat;

          datas.forEach(e => {       

 
          
            　　　　　　　　 
           if (e.keyy == "unit") { 
           
          
            　　　　　　　　　　 
           this.unit = e.valuess; 
           
          
            　　　　　　　　} 
           
          
 
          
            　　　　　　　　 
           if (e.keyy == "address") { 
           
          
            　　　　　　　　　　 
           this.address = e.valuess; 
           
          
            　　　　　　　　} 
           
         

　　　　　　　if (e.keyy == "xy") {
              // json字符串轉數值型數組
              var coord = e.valuess.split(",");
              this.center = coord.map(Number);
              this.markers.push({
                position: coord.map(Number)
              });

              this.windows.push({
                position: coord.map(Number),
                content:
                  "<h2 style='font-weight: bold;width: 400px;margin: 10px'>" +
                  this.unit +
                  "</h2>" +
                  "<div style='margin: 10px'>" +
                  "地址：" +
                  this.address +
                  "</div>",
                offset: [0, -20],
                open: true
              });
            }
          });
        }
      });
    }

 

 

 

作者：微微一笑絕絕子
出處：https://www.cnblogs.com/wwyxjjz/p/15188750.html
本博客文章均為作者原創，轉載請注明作者和原文鏈接。