如何使用天地图

第一步：登录/注册 国家地理信息公共服务平台
第二步：获取服务许可（Key）

如果你已经申请了许可，那可以不用看上的了，如何使用请看下面
1.首先在index.html中一下代码

<script src="http://api.tianditu.gov.cn/api?v=4.0&tk=自己的key" type="text/javascript"></script>复制

2.在页面中使用

//创建一个标签绘制地图
<div id="tdtMapDivID" class="chineMap"></div>
    //绘制地图
    tdMap() {
      let T = window.T;
      this.tdtMap = new T.Map(document.getElementById("tdtMapDivID"));
      //设置显示地图的中心点和级别
      this.tdtMap.centerAndZoom(new T.LngLat(106.00193, 35.705057), 4);
      const site = [
      // 添加更多位置
        {
          latitude: 39.9446467867198,
          longitude: 119.643178592118,
          name: "xxx",
          id: "0",
          icon: require("@/assets/icon.png"),
        },
        {
          latitude: 39.9573002662847,
          longitude: 116.852131675538,
          name: "xxx",
          id: "1",
          icon: require("@/assets/icon.png"),
        },
        
      ];
      //把坐标信息遍历到地图上生成对应的坐标
      site.forEach((item) => {
        var position = new T.LngLat(item.longitude, item.latitude);
        var icon = new T.Icon({
          iconUrl: item.icon, //引入图标
          iconSize: new T.Point(20, 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();
        var infoWin1 = new T.InfoWindow();
        let datalist = [
          {
            type: "xxx",
            name: "xxx",
            num: 1000,
            unit: "吨",
          },
          {
            type: "xxx",
            name: "xxx",
            num: 1000,
            unit: "吨",
          },
          {
            type: "xx",
            name: "xxx,
            num: 1000,
            unit: "吨",
          },
          // ... more users
        ];
        let content = "";
        for (let i = 0; i < datalist.length; i++) {
          content += `<tr style=" text-align: left;"><td > ${datalist[i].type} </td><td style="padding-left:12px;padding-right:12px">${datalist[i].name}</td><td >${datalist[i].num}${datalist[i].unit}</td></tr>`;
        }
 
        var sContent = `
        <div >
         <div>${item.name}</div>
          
           <table>
        <thead>
          <tr>
            <th>设施类别</th>
            <th style="padding-left:12px;padding-right:12px">设施名称</th>
            <th >贮存/处置能力</th>
          </tr>
        </thead>
        <div style="width:100%;border-bottom:1px solid #fff"></div>
        <tbody>
          ${content}
        </tbody>
      </table>
        </div>
        `;
        infoWin1.setContent(sContent);
        // 监听标注的鼠标移入事件
        marker.addEventListener("mouseover", (e) => {
          // 显示label
          label.show();
        });
 
        // 监听标注的鼠标移出事件
        marker.addEventListener("mouseout", function () {
          // 隐藏label
          label.hide();
        });
        marker.addEventListener("click", function () {
          // 鼠标点击显示弹窗
          marker.openInfoWindow(infoWin1);
        });
        this.tdtMap.addOverLay(label);
        this.tdtMap.addOverLay(marker);
      });
    },
 复制

效果：

图例是一个图片