VUE中接入天地图

1.在public/index.html内引入js

//天地图js
&lt;script type="text/javascript" src="http://api.tianditu.gov.cn/api?v=4.0&amp;tk=你的key"&gt;</script&gt;
//热力图js(根据业务引入)
<script type="text/javascript" src="http://lbs.tianditu.gov.cn/api/js4.0/opensource/openlibrary/HeatmapOverlay.js"&gt;</script&gt;

2.创建一个div

<div id="mapDiv"&gt;</div&gt;

 3.地图初始化

initMap() {
      const T = window.T
      let map = new T.Map("mapDiv");
      map.centerAndZoom(new T.LngLat(123.430898,41.788128), '14');
      //    设置地图主题色蓝色
      map.setStyle('indigo')
      //    设置地图主题色黑色
      // map.setStyle('black')
      //    设置热力图
      let heatmapOverlay = new T.HeatmapOverlay({
        radius: 30
      })
      map.addOverLay(heatmapOverlay)

      //    设置热力图显示的经纬度
      heatmapOverlay.setDataSet({data: [
        {lng: 123.453644, lat: 41.780768, count:120},
        {lng: 123.439482, lat: 41.789664, count: 610},
        {lng: 123.426092, lat: 41.785312, count: 180},
        {lng: 123.427294, lat: 41.795103, count: 180},
        {lng: 123.425094, lat: 41.792403, count: 180},
        {lng: 123.427294, lat: 41.795103, count: 180},
        {lng: 123.406265, lat: 41.799262, count: 180},
        {lng: 123.406365, lat: 41.794262, count: 180},
        {lng: 123.406265, lat: 41.799262, count: 180},
        {lng: 123.417681, lat: 41.777824, count: 180},
      ], max: 300});
      //    显示热力图
      setTimeout(() => {
        this.heatmapOverlay.show()
      },1000)
    },

代码007普通

打赏 收藏 海报 链接