vue結合高德地圖Api開發，實現一個點覆蓋物和信息窗口結合，展示點位相關信息組件

前段時間一直在結合高德地圖的api進行數據可視化開發，這也是前端的一個趨勢，網上關於這些的文章都比較少，最好還是去高德去看官方文檔，然後去琢磨怎麼玩。

先說下我這個應用場景吧，一般我們做地圖可視化開發，邊上會有些表格啊，或者點位表述，然後我們點擊這個點的那個div或者表格的那行，然後就在地圖上標記這個點顯示出來，並展示跟這個點位一些數據。大概就是這樣一個功能吧。看上去，更加專業，還知道位置在哪。

效果圖

新建一個組件

<template>
  <div class="dotMap">
    <div
      id="map"
      class="map"
    >
    </div>
  </div>
</template>

<script>
var map
export default {
  props: ['title','name','nameId','latLng'],
  data() {

  },
  mounted() {
    this.initMap()
    this.addMarker()
  },
  watch: {
  	//監聽數據變化
    title: {
      handler(newvalue, oldvalue) {
        this.addMarker()
      }
    }
  },
  methods: {
  	//初始化地圖
    initMap() {
      map = new AMap.Map('map', {
        resizeEnable: true, //是否監控地圖容器尺寸變化
        zoom: 11, //初始化地圖層級
        mapStyle: "amap://styles/darkblue",
        center: [116.46	, 39.92] //初始化地圖中心點
      })
    },
    //初始化信息窗口
    createInfoWindow(title, content) {
      var info = document.createElement("div");
      info.className = "dotclass";
      info.style.padding = '5px';
      // 定義頂部標題
      var top = document.createElement("div");
      var titleD = document.createElement("div");
      top.style.fontSize = '15px';
      titleD.innerHTML = title;
      top.appendChild(titleD);
      info.appendChild(top);

      // 定義中部內容
      var middle = document.createElement("div");
      // middle.className = "info-middle";
      middle.style.fontSize = '12px';
      middle.innerHTML = content;
      info.appendChild(middle);
      return info;
    },
    addMarker() {
      map.clearMap();
      var marker = new AMap.Marker({
        map: map,
        position: this.latLng
      });
      //實例化信息窗體
      var title = this.title,
      content = [];
      var str =  this.name + '  ' + this.nameId
      content.push(str);
      var infoWindow = new AMap.InfoWindow({
        isCustom: true,  //使用自定義窗體
        content: this.createInfoWindow(title, content),
        offset: new AMap.Pixel(1, -35)
      });
      //如果想要點擊打開的效果，可以在此處綁定給點標記綁定事件
      infoWindow.open(map, marker.getPosition());
    }
  }
}
</script>

<style lang="scss">
.dotclass{
  background: rgba(121, 121, 121, 0.35);
  color: #00FFD4;
}
</style>

<style lang="scss" scoped>
.dotMap {
  width: 100%;
  height: 100%;
  .map {
    width: 100%;
    height: 100%;
  }
}

</style>

然後導入組件

import DotMap from '你的組件位置'

//註冊下
components: {
    DotMap
  },

//使用
<DotMap :title="'我們都是好孩子嘟嘟嘟嘟嘟嘟嘟'" :name="'好孩子A'"  :nameId="'好孩子編號'" :latLng="[116.46	, 39.92]"></DotMap>

可能我們的話表格用的比較多，在信息窗口裏面，這個時候，你在信息窗口那創建一個表格。填入相信的數據就好了，我這是一個很簡單的demo，而且思路跟官方文檔是一樣的，大家也可以研究一下。

https://lbs.amap.com/api/javascript-api/example/infowindow/custom-style-infowindow

個人水平有限，有問題歡迎大家留言指導，僅供學習和參考。

學海無涯！努力二字，共勉！