需求介绍

这篇博客接着上一篇博客的内容接着往下说，上一篇介绍了天地图key的申请，还有引入vue脚手架中实例化，现在介绍一下天地图中覆盖物的各种操作

实际开发

首先定义一个空数组point,将坐标放入数组中，然后实例化该多边形，最后在地图实例中加入该多边形实例；多边形实例的内容决定了多边形的基本配置；如果该面携带者其他数据，可以将数据如下方表格内容一样填写进入Polygon实例中，比如下面我在代码里面写到的test就是我自定义的一个变量，被携带进入多边形实例中

名称	意义
color	多边形边框颜色
weight	多边形边框宽度
opacity	多边形边框透明度
fillColor	多边形填充颜色
fillOpacity	多边形填充色透明度

  var points = [];
  points.push(new T.LngLat(116.41136, 39.97569));
  points.push(new T.LngLat(116.411794, 39.9068));
  points.push(new T.LngLat(116.32969, 39.92940));
  points.push(new T.LngLat(116.385438, 39.90610));
  //创建面对象
  var polygon = new T.Polygon(points,{
          color: "blue", weight: 3, opacity: 0.5, fillColor: "#FFFFFF", fillOpacity: 0.5,test:"测试"
  });
  //向地图上添加面
   map.addOverLay(polygon);

接下来设置点击多边形出现弹窗，首先给多边形实例绑定点击事件

polygon.addEventListener("click", this.getinfo);

然后设置事件内容

getinfo(e) {
      var that = this;
      var p = e.target;
      var lnglat = new T.LngLat(p.getCenter().lng, p.getCenter().lat);//获取点击多边形中心经纬度
      var infoWin = new T.InfoWindow();    //创建信息窗口对象
      var Content = e.target.options.test; //设置信息窗口要显示的内容，此处可使用html代码;现在显示的就是之前在polygon实例中添加的数据
      infoWin.setContent(Content);//信息窗口加入信息
      infoWin.setOffset(new T.Point(0, -30));//设置信息窗口边距，第一个决定X方向，第二个决定Y方向
      infoWin.setLngLat(lnglat);//设置信息窗口位置
      that.map.addOverLay(infoWin);//向地图上添加信息窗口
    },

补充：

 polygon.onRemove();//删除多边形
 polygon.show();//显示多边形
 polygon.hide();//隐藏多边形

结果展示

PS：天地图中使用的覆盖物方式大同小异，如果需要更换其他图形，使用对应的类即可，比如圆形使用的类是Circle，具体的可以去天地图官网示例查看天地图示例网站

如果存在问题请大家批评指正！！！