vue2+天地图多点展示+自定义窗体

引入天地图

在vue的静态资源目录下的index.html中引入天地图的底图，开发天地图源码路径：天地图API

1.申请key（地址：点击跳转）

2.加载天地图，引用：public/index.html

3.创建地图并展示

<div class="map-container" id="containerT" style="border-radius: 40px"></div>

//数据结构
dituDate:[
           {
                longitude: "103.196532",
                latitude: "29.770933",
                name: "下站1F-售货区",
            }
        ]  



// 创建地图
		createMap() {
			const T = window.T;
			// 3.初始化地图对象
			this.tMap = new T.Map('containerT', {});
			// 4.设置显示地图的中心点和级别
			this.tMap.centerAndZoom(new T.LngLat(116.39759, 39.908776), 13);
			// 5.创建地图类型控件
			const ctrl = new T.Control.MapType([
				{
					title: '地图',
					icon: 'http://api.tianditu.gov.cn/v4.0/image/map/maptype/vector.png', //地图控件上所要显示的图层图标（默认图标大小80x80）
					layer: window.TMAP_NORMAL_MAP,
				},
				// {
				// 	title: '卫星',
				// 	icon: 'http://api.tianditu.gov.cn/v4.0/image/map/maptype/satellite.png',
				// 	layer: window.TMAP_SATELLITE_MAP,
				// },
			]);
			// 6.将控件添加到地图，一个控件实例只能向地图中添加一次。
			// this.tMap.addControl(ctrl); //小窗口
			

			// 8.创建覆盖使用的图标
			const icon = new T.Icon({
				iconUrl: '../marker-red.png', //可自己修改成本地图片
				iconSize: new T.Point(27, 27),
				iconAnchor: new T.Point(10, 25),
			});
			this.dituDate.forEach((element) => {
				// 9. 创建在该坐标上的一个图像标注实例
				let point = new T.LngLat(element.longitude, element.latitude);
				let marker = new T.Marker(point, icon);
				// console.log(point, 'point');
				element.lnglat = point;
				// 10.将覆盖物添加到地图中，一个覆盖物实例只能向地图中添加一次
				this.tMap.addOverLay(marker);
			
			});

			this.tMap.checkResize();
		},

展示效果

4.向地图添加点位，并且自定义弹窗

新增这行代码

//自定义点位弹窗
		addClickHandler(content, marker) {
			var T = window.T;
			marker.addEventListener('click', function (e) {
				// console.log(e, 'e', content, marker);
				var markerInfoWin = new T.InfoWindow(); // 创建信息窗口对象
				// 弹窗模版 自己可修改css，我需求只展示名字
				const sContent = `<div class="module-title" style="color: black;font-size: 14px;">${content.name}</div>
        `;
				// 相对于点偏移的位置
				markerInfoWin.setContent(sContent, { offset: new T.Point(0, -30) });
				marker.openInfoWindow(markerInfoWin, e.lnglat); // 开启信息窗口
			});
		},

展示结果