vue 調用高德地圖api實現標點和顯示窗體

 

一、前期工作

1.注冊高德地圖成為開發者

2.創建一個新應用、獲取秘鑰

 

 

二、引入

1.找到public  index.html文件插入js

 <script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=秘鑰&&plugin=AMap.Geocoder,AMap.AutoComplete,AMap.PlaceSearch"></script> 

需要地圖工具類的把變量加入到plugin中

三、初始化地圖，顯示多個點標記，點擊出現窗體

1.amap.vue

<template>
  <div class="my-container">
    <div id="map-demo"></div>
  </div>
</template>
    
<script>
import createInfoWindow from "@/utils/amap";
export default {
  data() {
    return {
      map: null,
      infoWindow: null,
      closeImg: require("@/assets/close.png"),
      pointList: [
        {
          address: "鄭州市收到貨爽膚水1",
          local: [113.651398, 34.767445],
        },
        {
          address: "鄭州市收到貨爽膚水2",
          local: [113.851398, 34.767445],
        },
        {
          address: "鄭州市收到貨爽膚水3",
          local: [113.751398, 34.667445],
        },
        {
          address: "鄭州市收到貨爽膚水4",
          local: [113.641398, 34.747445],
        },
      ],
      winInfo: [],
      winTitle: "",
      markList: [],
    };
  },
  mounted() {
    this.carGPSIP();
  },
  methods: {
    carGPSIP() {
      let self = this;
      this.map = new AMap.Map("map-demo", {
        resizeEnable: true,
        zoom: 8, //級別
        center: [113.663221, 34.7568711], //中心點坐標
        viewMode: "2D", //使用3D視圖
        mapStyle: "amap://styles/darkblue",
      }); //初始化地圖

      //遍歷生成多個標記點
      for (var i = 0, marker; i < this.pointList.length; i++) {
        var marker = new AMap.Marker({
          position: this.pointList[i].local, //不同標記點的經緯度
          map: self.map,
        });

        marker.title = `<span>大廳車間</span><span>設備名稱</span>`;
        marker.content = JSON.stringify([
          "電話：" + "123456789",
          "地址：" + this.pointList[i].address,
          "位置：" + this.pointList[i].local,
        ]);
        marker.on("click", self.markerClick);
        // marker.emit("click", { target: marker }); //默認初始化不出現信息窗體,打開初始化就出現信息窗體
      }

      //實例化信息窗體
      this.infoWindow = new AMap.InfoWindow({
        isCustom: true, //使用自定義窗體
        content: self.winInfo,
        offset: new AMap.Pixel(15, -35),
      });
      this.map.setFitView();
    },
    // 點標記點擊事件
    markerClick(e) {
      let self = this;
      this.winInfo = JSON.parse(e.target.content);
      this.winTitle = e.target.title;
      // 設置窗體內容
      this.infoWindow.setContent(
        createInfoWindow.createInfoWindow(
          self.winTitle,
          self.winInfo.join("<br/>"),
          function () {
            // 關閉窗體
            self.map.clearInfoWindow();
          }
        )
      );
      // 打開窗體
      self.infoWindow.open(self.map, e.target.getPosition());
    },
  },
};
</script>
    
<style scoped>
#map-demo {
  width: 500px;
  height: 500px;
}
</style>

2.utils/amap.js

封裝窗體結構樣式

function createInfoWindow(title, content,callback) {
    var info = document.createElement("div");
    info.className = "custom-info input-card content-window-card";

    //可以通過下面的方式修改自定義窗體的寬高
    info.style.width = "400px";
    // 定義頂部標題
    var top = document.createElement("div");
    // var titleD = document.createElement("div");
    var closeX = document.createElement("img");
    top.className = "info-top";
    
    closeX.src = require("@/assets/close.png");
    closeX.onclick = callback;

    // top.appendChild(titleD);
    top.innerHTML = title;
    top.appendChild(closeX);
    info.appendChild(top);

    // 定義中部內容
    var middle = document.createElement("div");
    middle.className = "info-middle";
    middle.style.backgroundColor = "white";
    middle.innerHTML = content;
    info.appendChild(middle);

    // 定義底部內容
    var bottom = document.createElement("div");
    bottom.className = "info-bottom";
    bottom.style.position = "relative";
    bottom.style.top = "0px";
    bottom.style.margin = "0 auto";
    info.appendChild(bottom);
    return info;
  }
  
  export default {
    createInfoWindow
}

3.amap.scss

地圖窗體的樣式文件

.content-window-card {
    position: relative;
    box-shadow: none;
    bottom: 0;
    left: 0;
    width: auto;
    padding: 0;
  }
  
  .content-window-card p {
    height: 2rem;
  }
  
  .custom-info {
    /* border: solid 1px silver; */
  }
  
  div.info-top {
    position: relative;
    background: #0f49b5;
    height: 30px;
    line-height: 30px;
    font-size: 14px;
    color: #fff;
    padding: 0 10px;
  }
  
  div.info-top span:nth-child(2) {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
  }
  
  div.info-top img {
    position: absolute;
    top: 8px;
    right: 10px;
    transition-duration: 0.25s;
    width: 15px;
  }
  
  div.info-top img:hover {
    box-shadow: 0px 0px 5px #000;
  }
  
  div.info-middle {
    background: rgba(0,54,98,.8)!important;
    font-size: 12px;
    padding: 10px 6px;
    line-height: 20px;
    color: #fff;
  }
  
  div.info-bottom {
    height: 0px;
    width: 100%;
    clear: both;
    text-align: center;
    width: 0;
      height: 0;
      border-left: 5px solid transparent;
      border-right: 15px solid transparent;
      border-top: 20px solid rgba(0,54,98,.8);
  }
  
  div.info-bottom img {
    position: relative;
    z-index: 104;
  }
  
  
  .info-middle img {
    float: left;
    margin-right: 6px;
  }