81-高德地图范围绘制，区域遮掩，蒙版遮罩

标签：info 遮罩蒙版 map AMap var new 81 true
参考：高德地图-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&amp;key=你的高德key&amp;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 rel="nofollow" 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 onl oad="mapInit();"> 
  <div id="container"></div>  
 </body>
</html>
标签：info,遮罩,蒙版,map,AMap,var,new,81,true
From： https://blog.51cto.com/u_14816966/5759232
81-高德地图范围绘制，区域遮掩，蒙版遮罩

相关文章

赞助商

阅读排行
