天地图在vue中的使用

官方文档地址： http://lbs.tianditu.gov.cn/api/js4.0/examples.html

地图引入

1.引入地图资源

在public文件夹index.html文件中引入地图资源

密令去官网注册申请：http://lbs.tianditu.gov.cn/home.html

2.初始化天地图

创建一个dom作为地图容器

<template>
  <div>
    <div id="divwxMap" class="divwxMap" style="width: 1200px; height: 600px"></div>
    <button class="btn" @click="clearIcon($event)" style="margin-right: 20px">删除粉色地标
    </button>
    <button class="btn" @click="showIcon($event)">显示粉色地标</button>
  </div>
</template>

创建地图方法：

mounted() {
    this.initwxMap();
},
methods: {
  // 初始化天地图
  initwxMap() {
    // vue项目需要先声明 T = window.T，不然后面无法获取到。
    var T = window.T;
    this.wxMap = new T.Map('divwxMap'); // div的id
    // 传参中心点经纬度，以及放大程度，最小1，最大18
    this.wxMap.centerAndZoom(new T.LngLat(116.397829, 39.907923), 14);
  }
}

地标的添加与删除

1.添加地标点

方法如下：

point() {
      var T = window.T;
      // 点位数据
      const site = [
        { longitude: 116.404137, latitude: 39.917403, name: 'AAA' },
        { longitude: 116.394396, latitude: 39.910754, name: 'ZZZ' },
      ];
      site.forEach((item) => {
        // 创建标注对象
        const marker = new T.Marker(new T.LngLat(item.longitude, item.latitude), {
          icon: new T.Icon({
            iconUrl: require('../assets/icon.png'), // 引入自定义图标位置
            iconSize: new T.Point(26, 26), // 图标大小
          }),
        });
        // 向地图上添加标注
        this.wxMap.addOverLay(marker);
        // 点位的点击事件，展示弹窗
        this.addClickHandler(item, marker);
      });
    },

2.删除地标点

删除地标点的方法：clearOverLays()

// 清除图标
  clearIcon(e) {
    console.log('显示地标', e.currentTarget.innerText); // 当前点击的图标名称
    this.wxMap.clearOverLays();
  },

清除地标后在此显示地标的话在调用一次创建地标的方法就行

添加自定义信息弹窗

创建方法：

// 点位弹窗
   addClickHandler(content, marker) {
     var T = window.T;
     const that = this;
     marker.addEventListener('click', function (e) {
       var markerInfoWin = new T.InfoWindow(); // 创建信息窗口对象
       // 弹窗模版
       const sContent = `<div class="module-title" style="color: pink;font-size: 24px;">${content.name}</div>
        <div class="module-content" style="font-size: 20px;color: #fff">
        </div>
      `;
       // 相对于点偏移的位置
       markerInfoWin.setContent(sContent, { offset: new T.Point(0, -30) });
       that.wxMap.openInfoWindow(markerInfoWin, e.lnglat); // 开启信息窗口
     });
   },

信息弹窗样式可用less去修改

我是放了个背景图

天地图默认左下会带有logo,
样式穿透去掉就行了

/deep/ .tdt-control-container {
  display: none !important;
}

天地图换肤

通过setStyle()方法切换
默认颜色：

this.wxMap.setStyle('black');// black  indigo 
this.wxMap.removeStyle()// 清除皮肤样式 相当于默认样式

black —— 黑色

indigo —— 深蓝色

默认地图样式