目录
相关知识点
类表示地图上一个图像标注 。其构造函数(:[,opts:])
：为标注点的坐标 ， 属于对象的地理坐标
opts：标注的属性 ， 或者说改变默认样式 ， 例如设置标注图标 ， 堆叠顺序 ， 透明度等 。
//创建一个默认的标注点//创建标注对象 ， 实例化Marker类var marker = new T.Marker(new T.LngLat(116.411794, 39.9068));//向地图上添加标注 。其中addOverLay(overlay:OverLay)方法将覆盖物添加到地图中 ， 一个覆盖物实例只能向地图中添加一次 。map.addOverLay(marker);
类表示地图上包含信息的窗口 。构造函数 (:|[,opts:])
：信息窗口的内容 ， 字符串类型或者对象
opts：信息窗口属性 ， 可设置弹窗的最大或最小宽度 。详情参考天地图 API 4.0 类参考
//在一个点上添加窗口信息//创建信息窗口对象var infoWin = new T.InfoWindow();infoWin.setLngLat(new T.LngLat(116.40969, 39.94940));//设置信息窗口要显示的内容infoWin.setContent("添加的信息窗口");//向地图上添加信息窗口map.addOverLay(infoWin);
需求：将多个地理坐标点及其信息在天地图上展示 。
解决思路：向后台请求数据后 ， 循环将所有坐标添加到地图上 ， 当鼠标触碰标注时显示窗口内容
结果展示
【【自学笔记】在天地图展示多个标注和文字信息】js代码
var map;var zoom = 12;function onLoad() {const imageURL = "http://t0.tianditu.gov.cn/img_w/wmts?" +"SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles" +"&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=你的秘钥";const imageURLT = "http://t0.tianditu.gov.cn/cia_w/wmts?" +"SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cia&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles" +"&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}" +"&tk=你的秘钥";//创建自定义图层对象const lay = new T.TileLayer(imageURL, {minZoom: 1, maxZoom: 18});const lay2 = new T.TileLayer(imageURLT, {minZoom: 1, maxZoom: 18});var config = {layers: [lay,lay2]};map = new T.Map('mapDiv',config);map.centerAndZoom(new T.LngLat(107.353926, 22.404108), zoom);//ajax向后台请求各个类型的数据$.ajax({url: "locdata",type: "GET",data: {},success: function (data) {//全部数据(租赁and自购)dataloc=data[0]//建立覆盖物buildCovers(dataloc)console.log(dataloc)}})}//购买方式：全选覆盖物function buildCovers(coverdata){//创建图标对象let icon = new T.Icon({iconUrl: "http://api.tianditu.gov.cn/img/map/markerA.png",iconSize: new T.Point(19, 27),//设置图标可视区域的大小 。iconAnchor: new T.Point(10, 25)//设置相对于图片左上角的像素距离 。可看作偏离（0,0）坐标});for (let i in coverdata){//循环将每一个坐标点创建Marker类对象var marker = new T.Marker(new T.LngLat(coverdata[i][2],coverdata[i][3]),{icon: icon});// 创建标注//先将关于该坐标点的信息存储到数据库中var content = [coverdata[i][4],coverdata[i][5],coverdata[i][6],coverdata[i][7],coverdata[i][1],coverdata[i][0]];// 将标注添加到地图中map.addOverLay(marker);//添加坐标点的监听事件 ， 当鼠标触碰该点时打开信息窗口addMouseoverHandler(content,marker);}}//鼠标在覆盖物上的监听事件function addMouseoverHandler(content,marker){marker.addEventListener("mouseover",function(e){openInfo(content,e)});}//窗口信息function openInfo(content,e){var point = e.lnglat;// 创建信息窗口对象var markerInfoWin = new T.InfoWindow()var sContent =`${content[4]}区域计划村屯:${content[2]}收割机数:租赁：${content[3]["租赁"]} | 自购：${content[3]["自购"]} 品牌:${content[1]}合作社:${content[0]}${content[5]}"style="text-decoration:none;hover{color:#f1c40f}">更多：》》`;//设置信息窗口要显示的内容markerInfoWin.setContent(sContent);//setOffset设置信息浮窗显示时向右下角偏移量（像素） 。-30则代表向上偏移markerInfoWin.setOffset(new T.Point(0,-30))//开启信息窗口map.openInfoWindow(markerInfoWin,point);}