vue结合高德地图Api开发，实现一个点覆盖物和信息窗口结合，展示点位相关信息组件

短命女 2023-07-09 05:23 19阅读 0赞

前段时间一直在结合高德地图的api进行数据可视化开发，这也是前端的一个趋势，网上关于这些的文章都比较少，最好还是去高德去看官方文档，然后去琢磨怎么玩。

先说下我这个应用场景吧，一般我们做地图可视化开发，边上会有些表格啊，或者点位表述，然后我们点击这个点的那个div或者表格的那行，然后就在地图上标记这个点显示出来，并展示跟这个点位一些数据。大概就是这样一个功能吧。看上去，更加专业，还知道位置在哪。

## 效果图 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3MTMxODg0_size_16_color_FFFFFF_t_70]

新建一个组件

<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][https_lbs.amap.com_api_javascript-api_example_infowindow_custom-style-infowindow]

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

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3MTMxODg0_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200301210528444.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3MTMxODg0,size_16,color_FFFFFF,t_70
[https_lbs.amap.com_api_javascript-api_example_infowindow_custom-style-infowindow]: https://lbs.amap.com/api/javascript-api/example/infowindow/custom-style-infowindow