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

个人水平有限，有问题欢迎大家留言指导，仅供学习和参考。

学海无涯！努力二字，共勉！