高德地图（区县级凸显）

最新推荐文章于 2023-09-18 15:40:47 发布
原创最新推荐文章于 2023-09-18 15:40:47 发布 · 2.2k 阅读
3 ·
CC 4.0 BY-SA版权
文章标签：
#高德
java 专栏收录该内容
37 篇文章
订阅专栏
<!DOCTYPE html>
<html>

	<head>
		<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
		<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, width=device-width">
		<link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css"/>
		<link rel="stylesheet" href="fz_gaode.css"/>
		<style type="text/css">
			#container {width:100%; height: 100%; }  
		</style>
		<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.6&key=XXXXXXXXXXXXX"></script>
		<script src="//webapi.amap.com/ui/1.0/main.js"></script>
		<title>test</title>
	</head>
	
	<body style="padding:0;margin:0;">
		<div id="container"></div>
	</body>
	
	<script type="text/javascript">
	
	    var map = new AMap.Map('container', {
	        zoom : 11,
			point : [ 3, 19 ],
			center : [120,30],
			zoomEnable : true,
			mapStyle:'amap://styles/dark',
			doubleClickZoom : true,
			features : [ 'bg', 'road' ]
	    });
	
	
	
		var lnglats = [
		       [120.5,30.6],//1
		       [120.5,30.6],//2
		       [120.5,30.6],//3
		       [120.5,30.6],//4
		       [120.5,30.6]//5 
		];
		
		
		var icon = [
		       'http://webapi.amap.com/theme/v1.3/markers/n/mark_r.png',
		       'http://webapi.amap.com/theme/v1.3/markers/n/mark_r.png',
		       'http://webapi.amap.com/theme/v1.3/markers/n/mark_r.png',
		       'http://webapi.amap.com/theme/v1.3/markers/n/mark_r.png',
		       'http://webapi.amap.com/theme/v1.3/markers/n/mark_r.png'
		];
		
		var titles = [
			'name',
			'name',
			'name',
			'name',
			'name '
		];
		
		var contents = [
			"<img src='http://tpc.googlesyndication.com/simgad/5843493769827749134'>introduce1<br/>电话：0575-88888888<br/><a href='https://mp.weixin.qq.com/'>详情</a>",
			"<img src='http://tpc.googlesyndication.com/simgad/5843493769827749134'>introduce2<br/>电话：0575-88888888<br/><a href='https://mp.weixin.qq.com/'>详情</a>",
			"<img src='http://tpc.googlesyndication.com/simgad/5843493769827749134'>introduce3<br/>电话：0575-88888888<br/><a href='https://mp.weixin.qq.com/'>详情</a>",
			"<img src='http://tpc.googlesyndication.com/simgad/5843493769827749134'>introduce4<br/>电话：0575-88888888<br/><a href='https://mp.weixin.qq.com/'>详情</a>",
			"<img src='http://tpc.googlesyndication.com/simgad/5843493769827749134'>introduce5<br/>电话：0575-88888888<br/><a href='https://mp.weixin.qq.com/'>详情</a>"
		];
		
		
		AMapUI.loadUI(['geo/DistrictExplorer'], function(DistrictExplorer) {
		   initPage(DistrictExplorer);
		});
		
		
		function initPage(DistrictExplorer) {
		   var districtExplorer = new DistrictExplorer({
		      map: map
		   });
		
		   var adcode = ;//地级市
		
		   districtExplorer.loadAreaNode(adcode, function(error, areaNode) {
		      renderAreaNode(districtExplorer, areaNode.getSubFeatureByAdcode(XXXX));//区级
		   });
		}
		
		
		function renderAreaNode(districtExplorer, feature) {
		
		   //清除已有的绘制内容
		   districtExplorer.clearFeaturePolygons();
		
		   
		   districtExplorer.renderFeature(feature,{
		         cursor: 'default',
                 strokeColor: '#3366cc',
                 strokeOpacity: 1,
                 strokeWeight: 1,
                 fillColor:'#3366cc',
                 fillOpacity:0.35
		      }
		   );
		
		   
		
		   //更新地图视野以适合区划面
		   map.setFitView(districtExplorer.getAllFeaturePolygons());
		}
		
		
		
		
	
	
		for (var i = 0, marker; i < lnglats.length; i++) {
			var temp = "var marker";
			var exp = "new AMap.Marker({position:["+lnglats[i]+"],icon:'"+icon[i]+"', map: map});";
			eval(temp+i+" = "+exp);
			eval("marker"+i).setExtData(titles[i]+"?"+contents[i]);
			
			eval("marker"+i).on('click', markerClick);
			
		}
		
		function markerClick(e) {
			new AMap.InfoWindow({
		        isCustom: true,  //使用自定义窗体
		        content: createInfoWindow(e.target.getExtData().split("?")[0], e.target.getExtData().split("?")[1]),
		        offset: new AMap.Pixel(16, -45)
		    }).open(map, e.target.getPosition())
		}
		
		
		
		//构建自定义信息窗体
		function createInfoWindow(title, content) {
		    var info = document.createElement("div");
		    info.className = "info";
		
		    //可以通过下面的方式修改自定义窗体的宽高
		    //info.style.width = "400px";
		    // 定义顶部标题
		    var top = document.createElement("div");
		    var titleD = document.createElement("div");
		    var closeX = document.createElement("img");
		    top.className = "info-top";
		    titleD.innerHTML = title;
		    closeX.src = "http://webapi.amap.com/images/close2.gif";
		    closeX.onclick = closeInfoWindow;
		
		    top.appendChild(titleD);
		    top.appendChild(closeX);
		    info.appendChild(top);
		
		    // 定义中部内容
		    var middle = document.createElement("div");
		    middle.className = "info-middle";
		    middle.style.backgroundColor = 'white';
		    middle.innerHTML = content;
		    info.appendChild(middle);
		
		    // 定义底部内容
		    var bottom = document.createElement("div");
		    bottom.className = "info-bottom";
		    bottom.style.position = 'relative';
		    bottom.style.top = '0px';
		    bottom.style.margin = '0 auto';
		    var sharp = document.createElement("img");
		    sharp.src = "http://webapi.amap.com/images/sharp.png";
		    bottom.appendChild(sharp);
		    info.appendChild(bottom);
		    return info;
		}
		
		//关闭信息窗体
		function closeInfoWindow() {
		    map.clearInfoWindow();
		}
	

	</script>
</html>
demo：https://download.youkuaiyun.com/download/zjy660358/10464779