如何使用高德地圖,顯示自己想要的行政區劃圖,實現代碼如下(xià),地圖樣式需要你自己注冊登錄高德地圖進行創建與設置。
<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], //縮放(fàng)範圍
resizeEnable: false, //調整大(dà)小(xiǎo)
showIndoorMap: false, //顯示格式
center:[110.293476, 25.231563],//設置中(zhōng)心點,必須是在你要顯示的區域中(zhōng)心
features:['point','road','bg'],//地圖要素
zoomEnable:true, //可縮放(fàng)
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("資(zī)源縣", "#ccccff");
Add_District("龍勝各族自治縣", "#ff0000");
Only_Display("桂林市"); //僅顯示區域,别的全部不顯示
//添加行政區
function Add_District(area, color="#10102D") {
//加載行政區劃插件
AMap.service('AMap.DistrictSearch', function() {
var opts = {
extensions: 'all', //返回行政區邊界坐标組等具體(tǐ)信息
subdistrict: 1, //返回下(xià)一(yī)級行政區
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++) {
//生(shēng)成行政區劃polygon
var polygon = new AMap.Polygon({
map: map,
path: bounds[i],
fillColor:color, //區塊背景色
fillOpacity: 0.3, //區塊透明度
strokeColor: '#4A90E2', //線顔色
strokeWeight: 1, //線大(dà)小(xiǎo)
});
polygons.push(polygon);
}
map.setFitView();//地圖自适應
}
});
});
}
//區域遮罩層,area爲當前隻顯示的區域,别的全部不顯示
function Only_Display(area, color="#10102D") {
var opts = {
extensions: 'all', //返回行政區邊界坐标組等具體(tǐ)信息
subdistrict: 1, //返回下(xià)一(yī)級行政區
level: 'district' //設置查詢行政區級别:city 市,district 區/縣
};
//實例化DistrictSearch
district = new AMap.DistrictSearch(opts);
//行政區查詢
district.search(area, function(status, result){
//外(wài)多邊形坐标數組和内多邊形坐标數組
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, //線大(dà)小(xiǎo)
strokeOpacity:1, //線透明:取值範圍[0-1],0表示完全透明,1表示不透明。默認爲0.9
//strokeStyle:'solid',//線樣式:實線:solid,虛線:dashed
/*勾勒形狀輪廓的虛線和間隙的樣式,此屬性在strokeStyle 爲dashed 時有效, 此屬性在ie9+浏覽器有效 取值:
實線:[0,0,0]
虛線:[10,10] ,[10,10] 表示10個像素的實線和10個像素的空白(bái)(如此反複)組成的虛線
點畫線:[10,2,10], [10,2,10] 表示10個像素的實線和2個像素的空白(bái) + 10個像素的實
線和10個像素的空白(bái) (如此反複)組成的虛線*/
//strokeDasharray:[0,0,0]
});
polygon.setPath(pathArray);
map.add(polygon);
});
}
</script>
商(shāng)德地圖樣式:amap://styles/859154f30ffaec4521b959815da8902d
分(fēn)享地圖樣式:lbs.amap.com/dev/mapstyle/mapshare/859154f30ffaec4521b959815da8902d
共享地圖樣式:lbs.amap.com/dev/mapstyle/clone?id=859154f30ffaec4521b959815da8902d
懂的人自己将樣式複制到您的帳号下(xià)即可,不懂的自己模拟創建。
運行展示效果如下(xià):
<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], //縮放(fàng)範圍
resizeEnable: false, //調整大(dà)小(xiǎo)
showIndoorMap: false, //顯示格式
center:[110.293476, 25.231563],//設置中(zhōng)心點,必須是在你要顯示的區域中(zhōng)心
features:['point','road','bg'],//地圖要素
zoomEnable:true, //可縮放(fàng)
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("資(zī)源縣", "#ccccff");
Add_District("龍勝各族自治縣", "#ff0000");
Only_Display("桂林市"); //僅顯示區域,别的全部不顯示
//添加行政區
function Add_District(area, color="#10102D") {
//加載行政區劃插件
AMap.service('AMap.DistrictSearch', function() {
var opts = {
extensions: 'all', //返回行政區邊界坐标組等具體(tǐ)信息
subdistrict: 1, //返回下(xià)一(yī)級行政區
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++) {
//生(shēng)成行政區劃polygon
var polygon = new AMap.Polygon({
map: map,
path: bounds[i],
fillColor:color, //區塊背景色
fillOpacity: 0.3, //區塊透明度
strokeColor: '#4A90E2', //線顔色
strokeWeight: 1, //線大(dà)小(xiǎo)
});
polygons.push(polygon);
}
map.setFitView();//地圖自适應
}
});
});
}
//區域遮罩層,area爲當前隻顯示的區域,别的全部不顯示
function Only_Display(area, color="#10102D") {
var opts = {
extensions: 'all', //返回行政區邊界坐标組等具體(tǐ)信息
subdistrict: 1, //返回下(xià)一(yī)級行政區
level: 'district' //設置查詢行政區級别:city 市,district 區/縣
};
//實例化DistrictSearch
district = new AMap.DistrictSearch(opts);
//行政區查詢
district.search(area, function(status, result){
//外(wài)多邊形坐标數組和内多邊形坐标數組
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, //線大(dà)小(xiǎo)
strokeOpacity:1, //線透明:取值範圍[0-1],0表示完全透明,1表示不透明。默認爲0.9
//strokeStyle:'solid',//線樣式:實線:solid,虛線:dashed
/*勾勒形狀輪廓的虛線和間隙的樣式,此屬性在strokeStyle 爲dashed 時有效, 此屬性在ie9+浏覽器有效 取值:
實線:[0,0,0]
虛線:[10,10] ,[10,10] 表示10個像素的實線和10個像素的空白(bái)(如此反複)組成的虛線
點畫線:[10,2,10], [10,2,10] 表示10個像素的實線和2個像素的空白(bái) + 10個像素的實
線和10個像素的空白(bái) (如此反複)組成的虛線*/
//strokeDasharray:[0,0,0]
});
polygon.setPath(pathArray);
map.add(polygon);
});
}
</script>
商(shāng)德地圖樣式:amap://styles/859154f30ffaec4521b959815da8902d
分(fēn)享地圖樣式:lbs.amap.com/dev/mapstyle/mapshare/859154f30ffaec4521b959815da8902d
共享地圖樣式:lbs.amap.com/dev/mapstyle/clone?id=859154f30ffaec4521b959815da8902d
懂的人自己将樣式複制到您的帳号下(xià)即可,不懂的自己模拟創建。
運行展示效果如下(xià):