如何使用高德地图,显示自己想要的行政区划图,实现代码如下,地图样式需要你自己注册登录高德地图进行创建与设置。
<style type="text/css">
#container {width:100%; height: 100%; border:1px #000 solid; }
</style>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<div id="container"></div>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的Key"></script>
<script>
var map = new AMap.Map('container', {
mapStyle: 'amap://styles/859154f30ffaec4521b959815da8902d', //设置使用地图样式
zoom:11, //级别
zooms: [9,15], //缩放范围
resizeEnable: false, //调整大小
showIndoorMap: false, //显示格式
center:[110.293476, 25.231563],//设置中心点,必须是在你要显示的区域中心
features:['point','road','bg'],//地图要素
zoomEnable:true, //可缩放
viewMode:'3D'//使用3D视图
});
Add_District("叠彩区", "#ee0066");
Add_District("七星区", "#ff55aa");
Add_District("象山区", "#cc7700");
Add_District("秀峰区", "#aabbcc");
Add_District("雁山区", "#4455ff");
Add_District("临桂区", "#ffff00");
Add_District("灵川县", "#0066ff");
Add_District("兴安县", "#cc66ff");
Add_District("全州县", "#fd9a4e");
Add_District("灌阳县", "#FF9900");
Add_District("阳朔县", "#ffffff");
Add_District("平乐县", "#e4393c");
Add_District("恭城瑶族自治县", "#cc99ff");
Add_District("荔浦市", "#00cc00");
Add_District("永福县", "#333333");
Add_District("资源县", "#ccccff");
Add_District("龙胜各族自治县", "#ff0000");
Only_Display("桂林市"); //仅显示区域,别的全部不显示
//添加行政区
function Add_District(area, color="#10102D") {
//加载行政区划插件
AMap.service('AMap.DistrictSearch', function() {
var opts = {
extensions: 'all', //返回行政区边界坐标组等具体信息
subdistrict: 1, //返回下一级行政区
level: 'district' //设置查询行政区级别:city 市,district 区/县
};
//实例化DistrictSearch
district = new AMap.DistrictSearch(opts);
//行政区查询
district.search(area, function(status, result) {
var bounds = result.districtList[0].boundaries;
var polygons = [];
if (bounds) {
for (var i = 0, l = bounds.length; i < l; i++) {
//生成行政区划polygon
var polygon = new AMap.Polygon({
map: map,
path: bounds[i],
fillColor:color, //区块背景色
fillOpacity: 0.3, //区块透明度
strokeColor: '#4A90E2', //线颜色
strokeWeight: 1, //线大小
});
polygons.push(polygon);
}
map.setFitView();//地图自适应
}
});
});
}
//区域遮罩层,area为当前只显示的区域,别的全部不显示
function Only_Display(area, color="#10102D") {
var opts = {
extensions: 'all', //返回行政区边界坐标组等具体信息
subdistrict: 1, //返回下一级行政区
level: 'district' //设置查询行政区级别:city 市,district 区/县
};
//实例化DistrictSearch
district = new AMap.DistrictSearch(opts);
//行政区查询
district.search(area, 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 bounds = result.districtList[0].boundaries;
var pathArray = [
outer
];
pathArray.push.apply(pathArray, bounds)
var polygon = new AMap.Polygon( {
pathL:pathArray,
fillColor: '#10102D',//区块背景颜色
fillOpacity: 1,//区块透明度:取值范围[0-1],0表示完全透明,1表示不透明。默认为0.9
strokeColor: '#4A90E2',//线颜色
strokeWeight: 2, //线大小
strokeOpacity:1, //线透明:取值范围[0-1],0表示完全透明,1表示不透明。默认为0.9
//strokeStyle:'solid',//线样式:实线:solid,虚线:dashed
/*勾勒形状轮廓的虚线和间隙的样式,此属性在strokeStyle 为dashed 时有效, 此属性在ie9+浏览器有效 取值:
实线:[0,0,0]
虚线:[10,10] ,[10,10] 表示10个像素的实线和10个像素的空白(如此反复)组成的虚线
点画线:[10,2,10], [10,2,10] 表示10个像素的实线和2个像素的空白 + 10个像素的实
线和10个像素的空白 (如此反复)组成的虚线*/
//strokeDasharray:[0,0,0]
});
polygon.setPath(pathArray);
map.add(polygon);
});
}
</script>
商德地图样式:amap://styles/859154f30ffaec4521b959815da8902d
分享地图样式:lbs.amap.com/dev/mapstyle/mapshare/859154f30ffaec4521b959815da8902d
共享地图样式:lbs.amap.com/dev/mapstyle/clone?id=859154f30ffaec4521b959815da8902d
懂的人自己将样式复制到您的帐号下即可,不懂的自己模拟创建。
运行展示效果如下:
<style type="text/css">
#container {width:100%; height: 100%; border:1px #000 solid; }
</style>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<div id="container"></div>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的Key"></script>
<script>
var map = new AMap.Map('container', {
mapStyle: 'amap://styles/859154f30ffaec4521b959815da8902d', //设置使用地图样式
zoom:11, //级别
zooms: [9,15], //缩放范围
resizeEnable: false, //调整大小
showIndoorMap: false, //显示格式
center:[110.293476, 25.231563],//设置中心点,必须是在你要显示的区域中心
features:['point','road','bg'],//地图要素
zoomEnable:true, //可缩放
viewMode:'3D'//使用3D视图
});
Add_District("叠彩区", "#ee0066");
Add_District("七星区", "#ff55aa");
Add_District("象山区", "#cc7700");
Add_District("秀峰区", "#aabbcc");
Add_District("雁山区", "#4455ff");
Add_District("临桂区", "#ffff00");
Add_District("灵川县", "#0066ff");
Add_District("兴安县", "#cc66ff");
Add_District("全州县", "#fd9a4e");
Add_District("灌阳县", "#FF9900");
Add_District("阳朔县", "#ffffff");
Add_District("平乐县", "#e4393c");
Add_District("恭城瑶族自治县", "#cc99ff");
Add_District("荔浦市", "#00cc00");
Add_District("永福县", "#333333");
Add_District("资源县", "#ccccff");
Add_District("龙胜各族自治县", "#ff0000");
Only_Display("桂林市"); //仅显示区域,别的全部不显示
//添加行政区
function Add_District(area, color="#10102D") {
//加载行政区划插件
AMap.service('AMap.DistrictSearch', function() {
var opts = {
extensions: 'all', //返回行政区边界坐标组等具体信息
subdistrict: 1, //返回下一级行政区
level: 'district' //设置查询行政区级别:city 市,district 区/县
};
//实例化DistrictSearch
district = new AMap.DistrictSearch(opts);
//行政区查询
district.search(area, function(status, result) {
var bounds = result.districtList[0].boundaries;
var polygons = [];
if (bounds) {
for (var i = 0, l = bounds.length; i < l; i++) {
//生成行政区划polygon
var polygon = new AMap.Polygon({
map: map,
path: bounds[i],
fillColor:color, //区块背景色
fillOpacity: 0.3, //区块透明度
strokeColor: '#4A90E2', //线颜色
strokeWeight: 1, //线大小
});
polygons.push(polygon);
}
map.setFitView();//地图自适应
}
});
});
}
//区域遮罩层,area为当前只显示的区域,别的全部不显示
function Only_Display(area, color="#10102D") {
var opts = {
extensions: 'all', //返回行政区边界坐标组等具体信息
subdistrict: 1, //返回下一级行政区
level: 'district' //设置查询行政区级别:city 市,district 区/县
};
//实例化DistrictSearch
district = new AMap.DistrictSearch(opts);
//行政区查询
district.search(area, 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 bounds = result.districtList[0].boundaries;
var pathArray = [
outer
];
pathArray.push.apply(pathArray, bounds)
var polygon = new AMap.Polygon( {
pathL:pathArray,
fillColor: '#10102D',//区块背景颜色
fillOpacity: 1,//区块透明度:取值范围[0-1],0表示完全透明,1表示不透明。默认为0.9
strokeColor: '#4A90E2',//线颜色
strokeWeight: 2, //线大小
strokeOpacity:1, //线透明:取值范围[0-1],0表示完全透明,1表示不透明。默认为0.9
//strokeStyle:'solid',//线样式:实线:solid,虚线:dashed
/*勾勒形状轮廓的虚线和间隙的样式,此属性在strokeStyle 为dashed 时有效, 此属性在ie9+浏览器有效 取值:
实线:[0,0,0]
虚线:[10,10] ,[10,10] 表示10个像素的实线和10个像素的空白(如此反复)组成的虚线
点画线:[10,2,10], [10,2,10] 表示10个像素的实线和2个像素的空白 + 10个像素的实
线和10个像素的空白 (如此反复)组成的虚线*/
//strokeDasharray:[0,0,0]
});
polygon.setPath(pathArray);
map.add(polygon);
});
}
</script>
商德地图样式:amap://styles/859154f30ffaec4521b959815da8902d
分享地图样式:lbs.amap.com/dev/mapstyle/mapshare/859154f30ffaec4521b959815da8902d
共享地图样式:lbs.amap.com/dev/mapstyle/clone?id=859154f30ffaec4521b959815da8902d
懂的人自己将样式复制到您的帐号下即可,不懂的自己模拟创建。
运行展示效果如下: