当前位置：首页 > news >正文

高德地图自有数据添加图层

news 来源：原创 2025/5/1 23:14:02

效果图：

代码：

<!doctype html>
<html>
<head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width"><title>图片图层</title><script src="//webapi.amap.com/maps?v=2.0&key=ab0e04426647094cb6feaa06c5483440"></script><style>html,body,#container {margin: 0;padding: 0;width: 100%;height: 100%;}.amap-marker-label {background-color: #cc0000;color: #fff;box-shadow: 2px 2px 10px white;border: #FFFFFF solid 1px;border-radius: 4px;}.col {width: 15px;height: 15px;margin-right: 8px;margin-top: 2px;border-radius: 50%;opacity: 0.3;background-repeat: no-repeat;background-position: center center;background-color: #E60012;}.isShow {position: absolute;top: 10%;right: 5%;background-color: #fff;padding: 5px 10px;border-radius: 20px;cursor: pointer;box-sizing: 2px 2px 10px #909090;}.ss {cursor: url("https://map.hit.edu.cn/2d/images/api/openhand.cur"), auto !important;}.cos {opacity: 1;}.labelContent {position: relative;}.labelContentOne {position: absolute;bottom: -13px;left: 3%;}.om {cursor: url("https://map.hit.edu.cn/images/api/closedhand.cur"),auto !important;}.infoData {display: none;}.custom-info {border: 0 !important;}.amap-info-close {color: #fff;font: 700 18px / 16px Tahoma, Verdana, sans-serif;}.amap-info-outer, .amap-menu-outer {padding: 0 !important;}.content-window-card {box-shadow: none;bottom: 0;left: 0;/* width: auto; */width: 20rem;padding: 0;}.content-window-card p {height: 2rem;}.custom-info {border: solid 1px silver;}.info-top {position: relative;background: none repeat scroll 0 0 #a40000;border-bottom: 1px solid #ccc;}.info-top div {display: inline-block;color: #fff !important;font-size: 14px;font-weight: bold;line-height: 31px;padding: 0 10px;}.info-middle {font-size: 12px;padding: 10px 6px;line-height: 20px;}.info-div {width: 15rem;}</style>
</head>
<body>
<div id="infoData" class="custom-info input-card content-window-card infoData"><div class="info-top"><div><span>A03公寓</span></div></div><div class="info-middle" style="background-color: white;"><div class="info-div">地址：一校区 </div><div class="info-div">介绍：XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX<br>XXXXXXXXXXXXXXXXXXXXXXXXXXXX </div><div class="info-div">工作年限：111111111</div> <div class="info-div">建厂时间：222222222</div></span></div></div>
<div id="container" class="ss" onmousedown="om()" onmouseup="op()"></div>
<div onclick="removeAllOverlay()" class="isShow"><div style="display: flex; align-items: center;"><div id="colors" class="col"></div><div style="margin-right: 3px;">标签</div></div>
</div>
<script>function om(){let cos = document.getElementById('container');cos.classList.add("om");}function op() {let cos = document.getElementById('container');cos.classList.remove("om");}let isShow = false;var imageLayer = new AMap.ImageLayer({url: 'https://amappc.cn-hangzhou.oss-pub.aliyun-inc.com/lbs/static/img/dongwuyuan.jpg',bounds: new AMap.Bounds([116.327911, 39.939229],[116.342659, 39.946275]),zooms: [15, 20]});var map = new AMap.Map('container', {center: [116.33719, 39.942384],zoom: 17.5,zooms:[16, 20],layers: [AMap.createDefaultLayer(),imageLayer,]});let marker = [];const clickHandler = function (e) {console.log('您在[ '+e.lnglat.getLng()+','+e.lnglat.getLat()+' ]的位置点击了地图！');};map.on("click", clickHandler);function isXs() {let positions = [[116.33284,39.943887],[116.332917,39.943767],[116.333063,39.943916],[116.333573,39.943668],[116.333803,39.943593],[116.334399,39.943575],[116.334957,39.943469],[116.332876,39.943216],[116.333149,39.942946]];let anchor = ['2D栋','2B栋','公厕','985闲庭','HIT长廊','科学院物业','2F栋','JQR栋','南苑餐厅']let icon = [];let list = [];for (let i = 0; i < positions.length; i++) {// 创建一个 Iconlet labelContent = "<div class='labelContent'>"+anchor[i]+"<div class='labelContentOne'><img  src='./public/images/tarrow_xq.png'/></div></div>"icon[i] = new AMap.Icon({// 图标尺寸size: new AMap.Size(0, 0),// 图标所用图片大小imageSize: new AMap.Size(0, 0),});// 将 Icon 传入 markerlet labelOffset = new AMap.Pixel(0, 5);list[i] = new AMap.Marker({position: positions[i],icon: icon[i],anchor: anchor[i], //设置锚点offset: new AMap.Pixel(0,0), //设置偏移量label: {direction: 'top',content: labelContent,offset: labelOffset,}});}this.marker = list;map.add(list);}function removeAllOverlay(){this.isShow = !this.isShow;if(this.isShow) {let cos = document.getElementById('colors');cos.classList.add("cos");isXs();} else {let cos = document.getElementById('colors');cos.classList.remove("cos");// 清除地图上所有添加的覆盖物// map.clearMap(); map.remove(this.marker);}  }let lnglats = [[116.335939,39.944363],[116.336662,39.944321],[116.337934,39.944472],[116.338594,39.944207]];let infoWindow = new AMap.InfoWindow({offset: new AMap.Pixel(0, -30)});for (var i = 0; i < lnglats.length; i++) {let list = new AMap.Marker({position: lnglats[i],map: map});let infoData = document.getElementById("infoData")list.content = infoData;list.on('click', markerClick);}function markerClick(e) {let infoData = document.getElementById("infoData")infoData.classList.remove("infoData");infoWindow.setContent(e.target.content);infoWindow.open(map, e.target.getPosition());}</script>
</body>
</html>