vue+天地图聚合+多个点的信息窗口

1.天地图申请秘钥

https://uums.tianditu.gov.cn/register

2.在index.html引入

<script type="text/javascript" src="http://api.tianditu.gov.cn/api?v=4.0&tk=您的密钥"></script>

3.利用官网给的代码进行输出

<template>
  <div id="mapDiv"></div>
</template>

<script>
export default {
	data(){
		return{
			zoom:3,
			myData1: [
				{ mapName: "海门", mapValue: [121.15, 31.89, 100,"地址：海门"] },
				{ mapName: "鄂尔多斯", mapValue: [109.781327, 39.608266, 130,"地址：鄂尔多斯"] },
				{ mapName: "招远", mapValue: [120.38, 37.35, 200,"地址：招远"] },
				{ mapName: "舟山", mapValue: [122.207216, 29.985295,  50,"地址：舟山"] },
				{ mapName: '湘潭', mapValue: [112.91,27.87,  50,"地址：湘潭"]},
				{ mapName: '金华', mapValue: [119.64,29.12,  50,"地址：金华"]},
				{ mapName: '岳阳', mapValue: [113.09,29.37,  50,"地址：岳阳"]},
				{ mapName: '长沙', mapValue: [122.207216, 29.985295,  50,"地址：长沙"]},
				{ mapName: '衢州', mapValue: [118.88,28.97,  50,"地址：衢州"]},
				{ mapName: '廊坊', mapValue: [116.7,39.53,  50,"地址：廊坊"]},
				{ mapName: '菏泽', mapValue: [115.480656,35.23375,  50,"地址：菏泽"]},
				{ mapName: '合肥', mapValue: [117.27,31.86,  50,"地址：合肥"]},
				{ mapName: '武汉', mapValue: [114.31,30.52,  50,"地址：武汉"]},
				{ mapName: '大庆', mapValue: [125.03,46.58,  50,"地址：大庆"]}
			],
		}
	},
	mounted(){
		this.onload()
	},
	methods:{
		onload() {
			var map = new T.Map('mapDiv', {
                attributionControl: false,
                inertia: false
            });
			map.centerAndZoom(new T.LngLat(104.114129, 37.550339), this.zoom);
			var arrayObj = new Array();
			//显示在地图上的具体点的坐标
            for (var i = 0; i < this.myData1.length; i++) {
               //官方大大的代码是随机500个坐标点
				var marker = new T.Marker(new T.LngLat(this.myData1[i].mapValue[0], this.myData1[i].mapValue[1]));
				var content = this.myData1[i].mapValue[3];
				// map.addOverLay(marker);// 将标注添加到地图中，加入这一句会使其标注，聚合点会有点点问题
				addClickHandler(content,marker);
				arrayObj.push(marker);//变成聚合点
			}
			//点击坐标点打开一个窗口
			function addClickHandler(content,marker){
                marker.addEventListener("click",function(e){
                    openInfo(content,e)}
                );
			}
			//开启信息窗口
            function openInfo(content,e){
                var point = e.lnglat;
                marker = new T.Marker(point);// 创建标注
                var markerInfoWin = new T.InfoWindow(content,{offset:new T.Point(0,-30)}); // 创建信息窗口对象
                map.openInfoWindow(markerInfoWin,point); //开启信息窗口
			}
			
			var markers = new T.MarkerClusterer(map, {markers: arrayObj});
		}
	}
}
</script>

<style>
	body,html{
		width:100%;height:100%;margin:0;font-family:"Microsoft YaHei"
	}
	//这个必须要有，不然天地图出不来。
	#mapDiv{
		width:100%;height:400px
	}
	input,b,p{
		margin-left:5px;font-size:14px
	}

</style>

4.代码已经上了，有什么不会欢迎评论。小菜鸡的分享，大佬轻喷。欢迎指教。