天地图Api。热力图和label文字标签一起使用的时候。文字标签不显示；

原创已于 2025-07-30 14:56:24 修改 · 249 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#天地图

于 2025-07-28 09:47:47 首次发布

问题原因：应该先设置label再去加载热力图。顺序错了就导致label不显示了

可以复制下面代码。改变addLabel和addHotMapOverLay就会发现换了位置文字标注就不显示了。千万顺序不要搞错了

<!DOCTYPE html>
<html>
<head>
 <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
 <meta name="keywords" content="天地图"/>
 <title>天地图</title>
 <script src=" http://api.tianditu.gov.cn/api?v=4.0&tk=a4dc6a04553b3c22e023a4995c2dd2ff" type="text/javascript"></script>
 <style type="text/css">
  body, html {
   width: 100%;
   height: 100%;
   margin: 0;
   font-family: "微软雅黑";
  }

  #mapDiv {
   height: 400px;
   width: 100%;
  }

 </style>
 <script type="text/javascript" src="http://lbs.tianditu.gov.cn/api/js4.0/opensource/openlibrary/HeatmapOverlay.js"></script>
 <script>
  let map;
  function onLoad() {
   map = new T.Map('mapDiv');
   map.centerAndZoom(new T.LngLat(108.95, 34.27), 4);

//注意执行顺序
   addLabel()
   addHotMapOverLay()
  }

  //添加文字标注
  function addLabel(){
   var latlng = new T.LngLat(116.420837,39.902395);
   var label = new T.Label({
    text: "天地图：<a href='https://www.tianditu.gov.cn'  target='_blank'>https://www.tianditu.gov.cn </a>",
    position: latlng,
    offset: new T.Point(-9, 0)
   });
   //创建地图文本对象
   map.addOverLay(label);
  }

  //添加热力图
 function addHotMapOverLay() {
   let heatmapOverlay = new T.HeatmapOverlay({
    radius: 30
   })
   map.addOverLay(heatmapOverlay)

   // 设置热力图显示的经纬度
   heatmapOverlay.setDataSet({data: [
     {name:'1',lng: 119.46, lat: 33.780768, count:120},
     {name:'1',lng: 114.5, lat: 34.79, count: 610},
     {name:'1',lng: 120.13, lat: 41.785312, count: 100},
     {name:'1',lng: 113.427294, lat: 41.795103, count: 180},
    ], max: 300});

  }
 </script>
</head>
<body onLoad="onLoad()">
<div id="mapDiv"></div>
</body>
</html>