地图皮肤切换（高德）

最新推荐文章于 2024-04-18 09:45:31 发布

原创最新推荐文章于 2024-04-18 09:45:31 发布 · 2.3k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#map皮肤切换 #卫星、路况、路网的切换 #高德地图皮肤使用

myWork-- 专栏收录该内容

59 篇文章

订阅专栏

本文介绍了如何在高德地图中实现地图皮肤的切换，包括卫星、路况和路网视图的转换。通过调用高德JavaScript API，可以轻松完成地图显示风格的动态改变。

说到地图，可以调用高德的接口。

api:http://lbs.amap.com/api/javascript-api/gettingstarted

<script type="text/javascript" src="js/colnum.js" defer="defer"></script>
	<script src="js/pie2.js" type="text/javascript" defer="defer"></script>
	<script src="js/mileage.js" type="text/javascript" defer="defer"></script>
	<script src="js/fold_line.js" type="text/javascript" defer="defer"></script>
	<script src="js/index2.js" type="text/javascript" defer="defer"></script>
	<script src="js/tab.js" type="text/javascript" defer="defer"></script>
	<link rel="stylesheet" href="css/indexalert.css" />

<link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css" />
	<script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>

<div class="mapstate">
				<div class="roadbtn"><img src="img/roadsth.png"></div>
				<div class='button-group1 skin' style="background-color: #0d9bf2">
					<img class="skincolor light" onclick='refresh(this.id)' name='mapStyle' id='normal' src="img/light.png" title="标准" />
					<img class="skincolor light" onclick='refresh(this.id)' name='mapStyle' id='dark' src="img/dark.png"  title="酷黑"/>
					<img class="skincolor light" onclick='refresh(this.id)' name='mapStyle' id='light' src="img/blue.png" title="护眼"/>
	
					<img src="img/wei.png" id="satelliteLayer" title="卫星" />
					<img src="img/luwang.png" id="roadNetLayer"  title="路网"/>
					<img src="img/hua_lukuang.png" id="trafficLayer"  class="choose" title="路况"/>
				</div>
			</div>

js:

//地图

var map = new AMap.Map("container", {
			resizeEnable: true,
			center: [116.397643, 39.90808],
			//			layers: [//只显示默认图层的时候，layers可以缺省
			//	            new AMap.TileLayer()//高德默认标准图层
			//	        ],
			//			layers: [new AMap.TileLayer.Satellite()],
			//		center: [116.397428, 39.90923],
			//      layers: [
			//          new AMap.TileLayer.Satellite(),
			//          new AMap.TileLayer.RoadNet()
			//      ],
			zoom: 14,
		});
		var trafficLayer = new AMap.TileLayer.Traffic({
			zIndex: 11
		})
		var roadNetLayer = new AMap.TileLayer.RoadNet({
			zIndex: 10
		})
		var satelliteLayer = new AMap.TileLayer.Satellite({
			zIndex: 9
		})
		//卫星
		$('#satelliteLayer').click(function() {
			var layerGroup = new AMap.LayerGroup([satelliteLayer])
			layerGroup.setMap(map)
			if ($(this).hasClass('choose')) {
				layerGroup.hide();
				$(this).removeClass('choose');
				$(this).attr('src','img/wei.png');
			} else {
				$(this).addClass('choose');
				layerGroup.show();
				
				$(this).attr('src','img/hua_wei.png');
			}
		});
		//路况
		$('#trafficLayer').click(function() {
			var layerGroup = new AMap.LayerGroup([trafficLayer])
			layerGroup.setMap(map)
			if ($(this).hasClass('choose')) {
				layerGroup.hide();
				$(this).removeClass('choose');
				$(this).attr('src','img/lukuang.png');
			} else {
				$(this).addClass('choose');
				layerGroup.show();
				$(this).attr('src','img/hua_lukuang.png');
			}
		});
		//路网
		$('#roadNetLayer').click(function() {
			var layerGroup = new AMap.LayerGroup([roadNetLayer])
			layerGroup.setMap(map)
			if ($(this).hasClass('choose')) {
				layerGroup.hide();
				$(this).removeClass('choose');
				$(this).attr('src','img/luwang.png');
			} else {
				$(this).addClass('choose');
				layerGroup.show();
				$(this).attr('src','img/hua_luwang.png');
			}
		});
		//皮肤
		$('.skin img').click(function(){
			if ($(this).hasClass("light")) {
			var alla = $(".light");
			for (var i = 0; i < $(alla).length; i++) {
				var imgurl = $(alla[i]).attr('src');
				var url = "";
				if (imgurl.indexOf("hua_") > 0) {
					url = imgurl.substring(0, imgurl.indexOf("hua_"));
					url += imgurl.substring(imgurl.indexOf("hua_") + 4);

				} else {
					url = imgurl;
				}
				$(alla[i]).attr('src', url);
			}
			var src = $(this).attr("src");

			var s1 = src.substring(0, 4);
			var s2 = src.substring(4);
			s1 += "hua_";
			s1 += s2;
			$(this).attr("src", s1);
		}
			
			
		});
		function refresh(enName) {
			map.setMapStyle('amap://styles/' + enName);
		}
		//实时路况图层
		var trafficLayer = new AMap.TileLayer.Traffic({
			zIndex: 10
		});
		trafficLayer.setMap(map);
		var isVisible = true;
		AMap.event.addDomListener(document.getElementById('control'), 'click', function() {
			if (isVisible) {
				trafficLayer.hide();
				isVisible = false;
			} else {
				trafficLayer.show();
				isVisible = true;
			}
		}, false);