vue使用天地图

 国家地理信息公共服务平台 天地图

1.引入 ： 在 index.html 中引入（tk自己在官网上申请）

   <script type="text/javascript" src="http://api.tianditu.gov.cn/api?v=4.0&tk="></script>

 2.使用 

<div id="world-chart"></div>

export default {
  data() {
    return {
      map: null,
      zoom: 6
    }
  },
  mounted() {
    this.initChart()
  },
  methods: {
    initChart() {
      //初始化地图对象
      this.map = new T.Map("world-chart");
      //设置显示地图的中心点和级别
      this.map.centerAndZoom(new T.LngLat(116.40969, 39.94940), this.zoom);
      //创建对象
      var ctrl = new T.Control.MapType();
      //添加控件
      this.map.addControl(ctrl);
      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));
      //创建面对象 color为线边颜色 fillColor为填充色
      var polygon = new T.Polygon(points, {
        color: "blue", weight: 3, opacity: 0.5, fillColor: "blue", fillOpacity: 0.5
      });
      //向地图上添加面
      this.map.addOverLay(polygon);
    }
  }
}

<style scoped>
#world-chart {
  width: 800px;
  height: 500px;
}
</style>

标签：map,vue,地图,LngLat,var,points,使用,push,new
来源： https://blog.csdn.net/qq_40701522/article/details/121332555