【自学笔记】天地图添加标注

知识点

MarkTool类：标注工具，用来让用户在地图上标注一个点，可以通过该工具获得用户标点的经纬度位置。
构造函数：MarkTool(map:Map[,opts:MarkToolOptions])。参数说明：map为地图对象；opts：MarkToolOptions类。该类详情可到天地图文档了解

效果图

在这里插入图片描述

html

备注：记得将代码中“您的秘钥”换为你在天地图上申请的秘钥

<html><head><meta charset="utf-8" /><link rel="stylesheet" type="text/css" href="css/index.css"/><script type="text/javascript" src="http://api.tianditu.gov.cn/api?v=4.0&tk=您的秘钥"></script><script type="text/javascript" src="js/jquery.min.js"></script><title></title></head><body onLoad="mapLoad()"><div id="tabMapBox"><div class="tool"><!-- 点击该图片，视图放大 --><img src="img/plus.png" alt=""onClick="map.zoomIn()"><!-- 点击该图片，视图缩小 --><img src="img/reduce.png" alt=""οnclick="map.zoomOut()"></div><div class="tagbox"><h3>标注工具</h3><input class="btn1" id="markbtn1" type="button" value="标注"/><input class="btn2" id="markbtn2" type="button" value="关闭"/><input class="btn3" id="markbtn3" type="button" value="编辑"/></div></div></body><script src="./js/index.js" type="text/javascript" charset="utf-8"></script>
</html>

css

*{padding: 0;margin: 0;box-sizing: border-box;
}
body, html{width: 100%;height: 100%;font-family:"微软雅黑";
}
/*修改为只有tabmap部分的内容*/
#tabMapBox{width: 100vw;height: 100vh;
}
#tabMapBox .tool{position: absolute;top: 21px;right: 30px;width: 60px;height: 90px;z-index: 9999;/*background-color: #1E9FFF;*/display: flex;justify-content: center;align-items: center;flex-direction: column;
}
#tabMapBox .tool img{height: 32px;width: 32px;margin: 5px 0;
}
#tabMapBox .tagbox{position: absolute;top: 30px;right: 90px;height: 68px;width: 220px;padding: 5px 10px;z-index: 9999;border-radius: 2px;background-color: #FFFFFF;box-shadow: 0 50px 50px rgba(10, 16, 20, 0.24), 0 0 30px rgba(10, 16, 20, 0.12);
}
#tabMapBox .tagbox h3{color: #89867e;text-align: center;font-weight: 300;font-size: 14px;
}
#tabMapBox .tagbox input{outline: none;padding: 0 5px;width: 60px;height: 30px;border-radius: 2px;border: none;color: #f5f6fa;font-weight: bold;box-shadow: 0 1px 0 rgba(255,255,255,0.34) inset,0 2px 0 -1px rgba(0,0,0,0.13),0 3px 0 -1px rgba(0,0,0,0.08),0 3px 13px -1px rgba(0,0,0,0.21);
}
#tabMapBox .tagbox .btn1{background-color: #e74c3c;
}
#tabMapBox .tagbox .btn1:active{background-color: #c0392b;
}
#tabMapBox .tagbox .btn1:focus{background-color: #f7b731;
}
#tabMapBox .tagbox .btn2{background-color: #2ecc71;margin: 0 5px;
}
#tabMapBox .tagbox .btn2:active{background-color: #27ae60;
}
#tabMapBox .tagbox .btn2:focus{background-color: #f7b731;
}
#tabMapBox .tagbox .btn3{background-color: #3498db;
}
#tabMapBox .tagbox .btn3:active{background-color: #2980b9;
}
#tabMapBox .tagbox .btn3:focus{background-color: #f7b731;
}

js

备注：记得将代码中“您的秘钥”换为你在天地图上申请的秘钥

var map,markerTool,zoom = 12,markInfoWin;
function mapLoad() {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 lay1 = new T.TileLayer(imageURL, {minZoom: 1, maxZoom: 18});const lay2 = new T.TileLayer(imageURLT, {minZoom: 1, maxZoom: 18});var config = {layers: [lay1, lay2]};map = new T.Map('tabMapBox', config);map.centerAndZoom(new T.LngLat(107.353926, 22.404108), zoom);//禁用双击放大map.disableDoubleClickZoom()//标注工具对象的图标tagicon= new T.Icon({iconUrl:"http://api.tianditu.gov.cn/img/map/markerA.png"})//创建标注工具对象markerTool = new T.MarkTool(map, {icon:tagicon,follow: true});
};
$(function() {// 标注按钮(新建)做得事情$(".tagbox #markbtn1").click(function () {//打开标注工具markerTool.open();//标注完后不可拖拽endeditMarker();});//标注按钮(关闭)做得事情$(".tagbox #markbtn2").click(function () {markerTool.close();endeditMarker();});//标注按钮(编辑)做得事情$(".tagbox #markbtn3").click(function () {editMarker();});
});
//使得标注可以拖拽
function endeditMarker() {//getMarkers获取所有工具绘制的标注图标。var markers = markerTool.getMarkers()for (var i = 0; i < markers.length; i++) {markers[i].disableDragging();}
}
//使得标注不可以拖拽
function editMarker() {var markers = markerTool.getMarkers()for (var i = 0; i < markers.length; i++) {markers[i].enableDragging();}
}