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

Y2000104

已于 2025-05-12 13:44:26 修改

阅读量192

点赞数 5

文章标签：前端 html

于 2025-05-12 13:43:01 首次发布

本文链接：https://blog.csdn.net/Y2000104/article/details/147895067

版权

效果图：

代码：

<!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>
	      <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" > 
	      <script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></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>
	<script type="text/javascript">
		window._AMapSecurityConfig = {
		  securityJsCode: "高德地图安全密钥",
		};
	</script>
	 <script src="https://webapi.amap.com/maps?v=2.0&key=高德地图key&plugin=AMap.Walking"></script>
<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 id="panel"></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;
		let 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++) {
					// 创建一个 Icon
					let 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 传入 marker
					let 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());
		    }
		   
		   
		    
			
			// 当前示例的目标是展示如何根据规划结果绘制路线，因此walkOption为空对象
			    var walkingOption = {
					 map: map,
					 panel: "panel",
					 hideMarkers: true,
				}
			
			    // 步行导航
			    var walking = new AMap.Walking(walkingOption)
			
			    //根据起终点坐标规划步行路线
			    walking.search([116.334123,39.945871], [116.335828,39.94555], (status, result) =>  {
			        // result即是对应的步行路线数据信息，相关数据结构文档请参考  https://lbs.amap.com/api/javascript-api/reference/route-search#m_WalkingResult
					if (status === 'complete') {
			            if (result.routes && result.routes.length) {
			                drawRoute(result.routes[0])
			                log.success('绘制步行路线完成')
			            }
			        } else {
			            log.error('步行路线数据查询失败' + result)
			        } 
			    });
			
			    function drawRoute (route) {
			        var path = parseRouteToPath(route)
			
			        var startMarker = new AMap.Marker({
			            position: path[0],
			            icon: 'https://map.hit.edu.cn/images/m-start.png',
						map: map,
						anchor: 'bottom-center',
			        })
			
			        var endMarker = new AMap.Marker({
			            position: path[path.length - 1],
			            icon: 'https://map.hit.edu.cn/images/m-end.png',
						map: map,
						anchor: 'bottom-center',
			        })
			
			        var routeLine = new AMap.Polyline({
			            path: path,
			            isOutline: true,
			            outlineColor: '#ffeeee',
			            borderWeight: 2,
			            strokeWeight: 5,
			            strokeColor: '#0091ff',
			            strokeOpacity: 0.9,
			            lineJoin: 'round',
			        })
			
			        map.add(routeLine);
			
			        // 调整视野达到最佳显示区域
			        map.setFitView([ startMarker, endMarker, routeLine ])
			    }
			
			    // 解析WalkRoute对象，构造成AMap.Polyline的path参数需要的格式
			    // WalkRoute对象的结构文档 https://lbs.amap.com/api/javascript-api/reference/route-search#m_WalkRoute
			    function parseRouteToPath(route) {
			        var path = []
			
			        for (var i = 0, l = route.steps.length; i < l; i++) {
			            var step = route.steps[i]
			
			            for (var j = 0, n = step.path.length; j < n; j++) {
			              path.push(step.path[j])
			            }
			        }
			
			        return path
			    }
			
	
</script>
</body>
</html>