<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<title>地图遮罩</title>
<style>
html,
body,
#container {
margin: 0;
height: 100%;
}
</style>
</head>
<body>
<div id="container"></div>
<script
src="https://webapi.amap.com/maps?v=1.4.15&key=key值&plugin=AMap.DistrictSearch"></script>
<script>
var map = new AMap.Map('container', {
zoom: 9.5,
center: [118.78, 32.04],
pitch: 0,
viewMode: '3D',
//设置地图背景图
// mapStyle:'amap://styles/40035571fa9fdd05a26fe1b05f48fdc9'
});
//标记点
var maker = new AMap.Marker({
position: [118.7799, 31.99202],
icon: new AMap.Icon({
image: "./redcamera.png",
size: new AMap.Size(22, 28), //图标所处区域大小
imageSize: new AMap.Size(22, 28) //图标大小
})
})
var maker2 = new AMap.Marker({
position: [118.8, 31.99202],
icon: new AMap.Icon({
image: "./redcamera.png",
size: new AMap.Size(22, 28), //图标所处区域大小
imageSize: new AMap.Size(22, 28) //图标大小
})
})
map.add(maker);
map.add(maker2);
//高德地图行政区域查询
new AMap.DistrictSearch({
extensions: 'all',//返回完整的行政区边界点坐标
subdistrict: 0,//不返回下级行政区
}).search('南京市', function (status, result) {
// 外多边形坐标数组和内多边形坐标数组
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 holes = result.districtList[0].boundaries
var pathArray = [
outer
];
pathArray.push.apply(pathArray, holes)
var polygon = new AMap.Polygon({
// pathL: pathArray,
//线条颜色,使用16进制颜色代码赋值。默认值为#006600
strokeColor: '#A0A9C2',
strokeWeight: 2,
//轮廓线透明度,取值范围[0,1],0表示完全透明,1表示不透明。默认为0.9
strokeOpacity: 1,
//多边形填充颜色,使用16进制颜色代码赋值,如:#FFAA00
fillColor: '#E8EBF3',
//多边形填充透明度,取值范围[0,1],0表示完全透明,1表示不透明。默认为0.9
fillOpacity: 1,
//轮廓线样式,实线:solid,虚线:dashed
strokeStyle: 'solid',
/*勾勒形状轮廓的虚线和间隙的样式,此属性在strokeStyle 为dashed 时有效, 此属性在
ie9+浏览器有效 取值:
实线:[0,0,0]
虚线:[10,10] ,[10,10] 表示10个像素的实线和10个像素的空白(如此反复)组成的虚线
点画线:[10,2,10], [10,2,10] 表示10个像素的实线和2个像素的空白 + 10个像素的实
线和10个像素的空白 (如此反复)组成的虚线
strokeDasharray: [10, 2, 10]*/
});
polygon.setPath(pathArray);
map.add(polygon);
})
//设置路况信息
// features: ['bg', 'road', 'building', 'point'];
// map.setFeatures(features);
map.setFeatures([]);
</script>
</body>
</html>
关于高德地图只显示某一行政区域
最新推荐文章于 2023-05-12 15:54:35 发布