共计 7183 个字符，预计需要花费 18 分钟才能阅读完成。
参考：
高德地图 -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>
正文完
发表至： javascript
2022-10-15
