1.在public/index.html内引入js
//天地图js
<script type="text/javascript" src="http://api.tianditu.gov.cn/api?v=4.0&tk=你的key"></script>
//热力图js(根据业务引入)
<script type="text/javascript" src="http://lbs.tianditu.gov.cn/api/js4.0/opensource/openlibrary/HeatmapOverlay.js"></script>
2.创建一个div
<div id="mapDiv"></div>
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)
},