关于天地图

当使用 Vue.js 开发 Web 应用程序时，使用地图服务是一种常见的需求，在 Vue.js 中使用天地图可以展示地理空间数据、实现地图交互和定位等功能。下面简单的介绍在 Vue.js 中使用天地图：

1. 申请天地图 API Key

首先在天地图官方网站上注册并申请自己的 API Key。通过 API Key，您可以在应用程序中访问天地图的服务和数据。（天地图的官方地址有详细说明）

2. 引入天地图

在项目的public文件夹中的index.html文件引入天地图js文件

js 复制代码

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

在vue文件中的template创建地图容器元素

<div id="yzMap"></div>
在methods中放入初始化的方法

js 复制代码

    roadMap () {
      // vue项目需要先声明 T = window.T，不然后面无法获取到。
      var T = window.T;
      this.wxMap = new T.Map('yzMap'); // div的id
      // 传参中心点经纬度，以及放大程度，最小1，最大18
      this.wxMap.centerAndZoom(new T.LngLat(116.001930, 29.705057), 12);
     
      getList().then(res => {
      //从后端返回的坐标信息存入stie中
        const site = res.data.map(item => ({
          longitude: item.longitude,
          latitude: item.latitude,
          name: item.deptName,
          id: item.deptId
        }))
        
        //把坐标信息遍历到地图上生成对应的坐标
        site.forEach((item) => {
          var position = new T.LngLat(item.longitude, item.latitude)
          var icon = new T.Icon({
            iconUrl: require('./img/mark_bs.png'), //引入图标
            iconSize: new T.Point(15, 20), //图标可视区域的大小。
          });
          var label = new T.Label({
            text: item.name, //文本标注的内容
            position: position, //文本标注的地理位置
            offset: new T.Point(-100, -30) //文本标注的位置偏移值
          })
          
          // 创建标注对象
          var marker = new T.Marker(position, {
            icon: icon
          })
          label.setFontSize(10);
          label.setZindex(9999)
          label.hide()
          
          // 监听标注的鼠标移入事件
          marker.addEventListener("mouseover", function () {
            // 显示label
            label.show();
          });

          // 监听标注的鼠标移出事件
          marker.addEventListener("mouseout", function () {
            // 隐藏label
            label.hide();
          });
          this.wxMap.addOverLay(label);
          this.wxMap.addOverLay(marker);

          // // 点位的点击事件，展示弹窗
          this.addClickHandler(item, marker);
        })
      }).catch(res => {
        this.mapMarker = null
      })
    },
  // 坐标点位弹窗功能
    addClickHandler (content, marker) {
      var T = window.T;
      const that = this;
      marker.addEventListener('click', function (e) {
        that.clickArrayMarker(content)
      });
    }

在mounted中挂载，需要在外包裹一层setTimeout

js 复制代码

mounted () {
    setTimeout(() => {
       this.roadMap()
    }, 100);
}

最后写上地图的css样式

css 复制代码

#yzMap {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 9999;
}

//去掉天地图logo
::v-deep .tdt-control-container {
  display: none !important;
}

大功告成

Vue2中使用天地图

关于天地图

1. 申请天地图 API Key

2. 引入天地图