vue中使用天地图

在Vue中使用天地图（TianDiTu），通常需要引入天地图提供的JavaScript API。以下是一个基本的示例，展示了如何在Vue组件中集成天地图：

1. 首先，在你的Vue项目中的index.html或相应的模板文件中，引入天地图JavaScript API：

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

请将你的天图key替换为你从天图官网申请的API key。

2. 然后，在Vue组件中创建地图实例：

<template>
  <div id="map" style="width: 100%; height: 400px;"></div>
</template>
 
<script>
export default {
  name: 'TianDiTuMap',
  mounted() {
    this.initMap();
  },
  methods: {
    initMap() {
      var map = new T.Map('map');
      map.centerAndZoom(new T.LngLat(116.40769, 39.89945), 12);
    }
  }
}
</script>

在上述代码中，TianDiTuMap组件在被挂载到DOM后，会调用initMap方法来初始化地图。地图的中心点设置为北京市区，缩放级别为12。

请确保你的Vue项目能够访问天图的API服务，并且你已经拥有了正确的API key。