参考：
高德地图-2D地图下区域遮掩(只显示固定区域里的内容)
其中：地图范畴绘制：工具
实现代码：
<!DOCTYPE html><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width" /> <style type="text/css">#container,html,body{ height: 100%; margin:0;}</style> <title>清华大学</title> <script src="http://cdn.highcharts.com.cn/highcharts/highcharts.js"></script> <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" /> <script language="javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=你的高德key&plugin=Map3D,AMap.Scale,AMap.ControlBar,AMap.PolyEditor"></script> <script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script> <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" /> <style> html, body, #container { height: 100%; width: 100%; } .content-window-card { position: relative; box-shadow: none; bottom: 0; left: 0; width: auto; padding: 0; } .content-window-card p { height: 2rem; } .custom-info { border: solid 1px silver; } div.info-top { position: relative; background: none repeat scroll 0 0 #F9F9F9; border-bottom: 1px solid #CCC; border-radius: 5px 5px 0 0; } div.info-top div { display: inline-block; color: #333333; font-size: 14px; font-weight: bold; line-height: 31px; padding: 0 10px; } div.info-top img { position: absolute; top: 10px; right: 10px; transition-duration: 0.25s; } div.info-top img:hover { box-shadow: 0px 0px 5px #000; } div.info-middle { font-size: 12px; padding: 10px 6px; line-height: 20px; } div.info-bottom { height: 0px; width: 100%; clear: both; text-align: center; } div.info-bottom img { position: relative; z-index: 104; } span { margin-left: 5px; font-size: 11px; } .info-middle img { float: left; margin-right: 6px; } </style> <script language="javascript">function mapInit() { var options = { areas:[{ //围栏1 //visible:false,//是否可见 rejectTexture:true,//是否屏蔽自定义地图的纹理 path: [[[116.316092,39.992203], [116.314933,39.999798], [116.31519,40.004598], [116.31562,40.005255], [116.316414,40.00583], [116.318216,40.006258], [116.318967,40.006652], [116.318946,40.008214], [116.3185,40.012725], [116.326804,40.013267], [116.328349,40.013251], [116.328972,40.013152], [116.330903,40.013218], [116.331632,40.012955], [116.335688,40.009356], [116.336675,40.007729], [116.336932,40.00689], [116.336954,40.006841], [116.337126,40.001368], [116.337705,39.992869], [116.325367,39.992409]]] }] }; var areapath1 = [ [116.326348,40.013238], [116.326182,40.012671], [116.325538,40.011849], [116.32483,40.01111], [116.324246,40.011258], [116.323833,40.011295], [116.323607,40.011278], [116.323141,40.011221], [116.322508,40.011056], [116.322384,40.011122], [116.322298,40.010929], [116.3224,40.010358], [116.322567,40.010222], [116.322899,40.010321], [116.323478,40.010386], [116.323849,40.010411], [116.323838,40.009215], [116.323865,40.007753], [116.323951,40.005982], [116.324814,40.006035], [116.32637,40.006117], [116.327539,40.006195], [116.327641,40.005086], [116.327668,40.004634], [116.330506,40.004757], [116.330393,40.006643], [116.330345,40.007995], [116.330318,40.009084], [116.333784,40.009228], [116.335125,40.009289], [116.33543,40.009355], [116.335607,40.009396] ]; var areapath2 = [ [116.315051,39.99988], [116.316022,39.999925], [116.316049,39.99983], [116.316226,39.999748], [116.318302,39.999863], [116.321858,40.000032], [116.324052,40.000825], [116.3249,40.000899], [116.325898,40.000997], [116.327958,40.001014], [116.328151,39.999575], [116.328473,39.997381], [116.328623,39.996255], [116.328956,39.99268] ]; var outer = [ new AMap.LngLat(-360,90,true), new AMap.LngLat(-360,-90,true), new AMap.LngLat(360,-90,true), new AMap.LngLat(360,90,true), ]; var pathArray = [ outer ]; pathArray.push.apply(pathArray,options.areas[0].path) var map = new AMap.Map("container", { resizeEnable: true, //是否监控地图容器尺寸变动 rotateEnable:true,//地图是否能够旋转 //pitchEnable:true,//是否3D地图 zoom:15, zooms:[14,20], //pitch:80,//歪斜角度 showIndoorMap: false, // 暗藏地图自带的室内地图图层 buildingAnimation:true,//楼块呈现是否带动画 expandZoomRange:true, //viewMode:'3D',//开启3D视图,默认为敞开 buildingAnimation:true,//楼块呈现是否带动画 mapStyle:'amap://styles/normal', center: [116.327164, 40.003479], //初始地图中心点 features:['bg','point','road'], layers:[ new AMap.TileLayer({}) ] }); map.addControl(new AMap.ControlBar({ showZoomBar:true, showControlButton:true, position:{ right:'10px', top:'10px' } })) new AMap.Polygon({ bubble:true, fillOpacity:0.6, strokeWeight:2, strokeColor: '#00eeff', fillColor: '#71B3ff', path:pathArray, map:map }) var polyline = new AMap.Polyline({ path: areapath1, isOutline: true, outlineColor: '#ffeeff', borderWeight: 3, strokeColor: "#3366FF", strokeOpacity: 1, strokeWeight: 2, // 折线款式还反对 'dashed' strokeStyle: "solid", // strokeStyle是dashed时无效 strokeDasharray: [10, 5], lineJoin: 'round', lineCap: 'round', zIndex: 50, }) var polyline2 = new AMap.Polyline({ path: areapath2, isOutline: true, outlineColor: '#ffeeff', borderWeight: 3, strokeColor: "#3366FF", strokeOpacity: 1, strokeWeight: 2, // 折线款式还反对 'dashed' strokeStyle: "solid", // strokeStyle是dashed时无效 strokeDasharray: [10, 5], lineJoin: 'round', lineCap: 'round', zIndex: 50, }) polyline.setMap(map) polyline2.setMap(map) //实例化信息窗体var title = 'xxx<span style="font-size:11px;color:#F00;">停车场</span>',content = [];content.push("停放车辆:300/320");content.push("长期停车:100/120");content.push("月卡停车:200/200");content.push("<a href='https://ditu.amap.com/detail/B000A8URXB?citycode=110105'>详细信息</a>");var infoWindow = new AMap.InfoWindow({ isCustom: true, //应用自定义窗体 content: createInfoWindow(title, content.join("<br/>")), offset: new AMap.Pixel(16, -45)});//构建自定义信息窗体function createInfoWindow(title, content) { var info = document.createElement("div"); info.className = "custom-info input-card content-window-card"; //能够通过上面的形式批改自定义窗体的宽高 //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 = "https://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 = "https://webapi.amap.com/images/sharp.png"; bottom.appendChild(sharp); info.appendChild(bottom); return info;}//敞开信息窗体function closeInfoWindow() { map.clearInfoWindow();} addMarker();//增加marker标记function addMarker() { var carparkIcon = new AMap.Icon({ // 图标尺寸 size: new AMap.Size(35, 35), // 图标的取图地址 image: '停车场.png', // 图标所用图片大小 imageSize: new AMap.Size(35, 35), }); var CameraIcon = new AMap.Icon({ // 图标尺寸 size: new AMap.Size(35, 35), // 图标的取图地址 image: '摄像头.png', // 图标所用图片大小 imageSize: new AMap.Size(40, 40), }); var marker = new AMap.Marker({ map: map, position: [116.3246,40.01113], icon: carparkIcon }); var marker2 = new AMap.Marker({ map: map, position: [116.333515,39.99886], icon: carparkIcon }); var CameraMark = new AMap.Marker({ map: map, position: [116.327968,40.001001], icon: CameraIcon }); //鼠标点击marker弹出自定义的信息窗体 AMap.event.addListener(marker, 'click', function () { infoWindow.open(map, marker.getPosition()); }); AMap.event.addListener(marker2, 'click', function () { infoWindow.open(map, marker2.getPosition()); });} }</script> </head> <body onload="mapInit();"> <div id="container"></div> </body></html>