参考：blog.csdn.net/wbx_wlg/art… blog.csdn.net/VcStrong/ar… 代码完全参考这两个帖子，主要说下代码跑的过程中一些问题:
- A1:边界绘制无效，引入ChinaPly.json失败，效果及报错：
- Q1：完整代码及项目目录结构如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>案例四 中国地图 mapv</title>
<link rel="stylesheet" href="./css/common.css">
<style> html, body, #map{ width:100%;height:100%;overflow: hidden;margin:0;font-family:"微软雅黑";}</style>
</head>
<body>
<div id="map"></div>
</body>
</html>
<script src="./js/jquery-1.11.0.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的AK手动替换"></script>
<script src="http://mapv.baidu.com/build/mapv.min.js"></script>
<script>
// 百度地图API功能
var map = new BMap.Map("map", {
enableMapClick: false
}); // 创建Map实例
map.centerAndZoom(new BMap.Point(105.403119, 38.028658), 5); // 初始化地图,设置中心点坐标和地图级别
map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放
// 地图自定义样式
map.setMapStyle({
styleJson: [{
"featureType": "water",
"elementType": "all",
"stylers": {
"color": "#044161"
}
}, {
"featureType": "land",
"elementType": "all",
"stylers": {
"color": "#091934"
}
}, {
"featureType": "boundary",
"elementType": "geometry",
"stylers": {
"color": "#064f85"
}
}, {
"featureType": "railway",
"elementType": "all",
"stylers": {
"visibility": "off"
}
}, {
"featureType": "highway",
"elementType": "geometry",
"stylers": {
"visibility": "off"
}
}, {
"featureType": "highway",
"elementType": "geometry.fill",
"stylers": {
"visibility": "off"
}
}, {
"featureType": "highway",
"elementType": "labels",
"stylers": {
"visibility": "off"
}
}, {
"featureType": "arterial",
"elementType": "geometry",
"stylers": {
"color": "#004981",
"lightness": -39
}
}, {
"featureType": "arterial",
"elementType": "geometry.fill",
"stylers": {
"color": "#00508b"
}
}, {
"featureType": "poi",
"elementType": "all",
"stylers": {
"visibility": "off"
}
}, {
"featureType": "green",
"elementType": "all",
"stylers": {
"color": "#056197",
"visibility": "off"
}
}, {
"featureType": "subway",
"elementType": "all",
"stylers": {
"visibility": "off"
}
}, {
"featureType": "manmade",
"elementType": "all",
"stylers": {
"visibility": "off"
}
}, {
"featureType": "local",
"elementType": "all",
"stylers": {
"visibility": "off"
}
}, {
"featureType": "arterial",
"elementType": "labels",
"stylers": {
"visibility": "off"
}
}, {
"featureType": "boundary",
"elementType": "geometry.fill",
"stylers": {
"color": "#029fd4"
}
}, {
"featureType": "building",
"elementType": "all",
"stylers": {
"color": "#1a5787"
}
}, {
"featureType": "label",
"elementType": "all",
"stylers": {
"visibility": "off"
}
}, {
"featureType": "poi",
"elementType": "labels.text.fill",
"stylers": {
"color": "#ffffff"
}
}, {
"featureType": "poi",
"elementType": "labels.text.stroke",
"stylers": {
"color": "#1e1c1c"
}
}, {
"featureType": "administrative",
"elementType": "labels",
"stylers": {
"visibility": "on"
}
}, {
"featureType": "road",
"elementType": "labels",
"stylers": {
"visibility": "off"
}
}]
});
// map.addEventListener("zoomstart", function () {
// drawBoundary(); //绘制中国区域行政边界
// });
setTimeout(function () {
drawBoundary();
}, 1000);
//绘制中国区域行政边界
function drawBoundary() {
/*画遮蔽层的相关方法
*思路: 首先在中国地图最外画一圈，圈住理论上所有的中国领土，然后再将每个闭合区域合并进来，并全部连到西北角。
* 这样就做出了一个经过多次西北角的闭合多边形*/
//定义中国东南西北端点，作为第一层
//向数组中添加一次闭合多边形，并将西北角再加一次作为之后画闭合区域的起点
var pStart = new BMap.Point(180,90);
var pEnd = new BMap.Point(0,-90);
var pArray = [
new BMap.Point(pStart.lng,pStart.lat),
new BMap.Point(pEnd.lng,pStart.lat),
new BMap.Point(pEnd.lng,pEnd.lat),
new BMap.Point(pStart.lng,pEnd.lat)
];
//循环添加各闭合区域
$.get('./ChinaPly.json', function (data) {
console.log("**", data)
var chinaPly=data.chinaPly;
$.each(chinaPly,function (index,value) {
pArray.push(new BMap.Point(value[0],value[1]));
});
//添加遮蔽层
var plyall = new BMap.Polygon(pArray,
{ strokeOpacity: 1, strokeColor: "#091934",
strokeWeight: 1, fillColor: "#091934",fillOpacity: 1 }); //建立多边形覆盖物
map.addOverlay(plyall);
pStart = new BMap.Point(180,90);
pEnd = new BMap.Point(0,-90);
pArray = [
new BMap.Point(135.077218,48.454352),
new BMap.Point(pStart.lng,pStart.lat),
new BMap.Point(pStart.lng,pEnd.lat),
new BMap.Point(135.077218,48.454352)];
var boundary = new BMap.Polygon(pArray,
{ strokeOpacity: 1, strokeColor: "#091934",
strokeWeight: 1, fillColor: "#091934",fillOpacity: 1}); //建立多边形覆盖物
map.addOverlay(boundary);
});
}
</script>
ChinaPly.json文件
{
"chinaPly": [
[
135.077218,
48.544352
],
[
134.92218,
48.584352
],
[
134.827218,
48.534352
],
[
134.727669,
48.495377
],
[
134.304531,
48.394091
],
[
133.513447,
48.177476
],
[
132.832747,
48.054205
],
[
132.519993,
47.789172
],
[
131.765704,
47.813962
],
[
131.103402,
47.776772
],
[
130.919429,
48.331824
],
[
130.77225,
48.868729
],
[
129.907577,
49.351849
],
[
128.73015,
49.699156
],
[
127.791888,
49.85404
],
[
127.791888,
50.492084
],
[
126.927215,
51.616759
],
[
126.467283,
52.579818
],
[
125.952158,
53.059077
],
[
124.701142,
53.313247
],
[
123.56051,
53.664362
],
[
121.555204,
53.46722
],
[
120.340983,
53.125528
],
[
119.95464,
52.579818
],
[
120.616942,
52.523746
],
[
120.506559,
52.095236
],
[
119.862653,
51.616759
],
[
119.365926,
50.959196
],
[
119.089967,
50.362806
],
[
119.108364,
50.05583
],
[
118.133307,
49.925357
],
[
117.471005,
49.794528
],
[
116.808702,
49.889712
],
[
116.385564,
49.758785
],
[
115.962426,
48.953617
],
[
115.520891,
48.147476
],
[
115.796851,
47.677465
],
[
116.27518,
47.652609
],
[
117.103059,
47.652609
],
[
118.004526,
47.801568
],
[
118.887596,
47.577968
],
[
119.402721,
47.127871
],
[
119.402721,
46.800397
],
[
118.464459,
46.825659
],
[
117.103059,
46.648575
],
[
115.980824,
46.088213
],
[
115.226534,
45.702829
],
[
114.159491,
45.275796
],
[
112.761297,
45.171782
],
[
111.639061,
45.132727
],
[
111.436691,
44.55683
],
[
111.51028,
44.001703
],
[
110.682402,
43.387647
],
[
108.897864,
42.658724
],
[
106.892559,
42.522781
],
[
103.82021,
42.140555
],
[
102.422016,
42.536389
],
[
101.336575,
42.82146
],
[
99.478448,
42.929712
],
[
97.601924,
42.997272
],
[
96.019756,
43.815487
],
[
92.72664,
45.288784
],
[
91.144473,
45.599605
],
[
91.457227,
46.483616
],
[
90.794924,
47.553064
],
[
89.562305,
48.221295
],
[
88.2377,
48.953617
],
[
87.722576,
49.279683
],
[
87.097067,
49.255604
],
[
86.60034,
49.122957
],
[
86.177203,
48.710696
],
[
85.533297,
48.344091
],
[
85.404516,
47.875888
],
[
85.349324,
47.390897
],
[
84.926186,
47.215692
],
[
83.233635,
47.315881
],
[
82.865689,
47.328391
],
[
82.258578,
45.844449
],
[
82.368962,
45.366651
],
[
82.093003,
45.30177
],
[
80.989165,
45.275796
],
[
79.903724,
45.015402
],
[
80.326862,
44.332772
],
[
80.510835,
43.642047
],
[
80.621219,
43.186043
],
[
80.27167,
43.010775
],
[
79.885327,
42.304653
],
[
79.259819,
41.838593
],
[
78.487133,
41.576647
],
[
77.916816,
41.341363
],
[
77.272911,
41.16086
],
[
76.739389,
41.02167
],
[
76.26106,
40.546202
],
[
75.672346,
40.75639
],
[
74.881262,
40.630357
],
[
74.255754,
40.293095
],
[
73.777425,
39.939968
],
[
73.74063,
39.556517
],
[
73.53826,
39.34256
],
[
73.685438,
38.725549
],
[
74.034987,
38.407771
],
[
74.458125,
38.335352
],
[
74.734084,
38.074036
],
[
74.844468,
37.577865
],
[
74.678892,
37.21089
],
[
74.6237,
36.975076
],
[
75.414784,
36.501232
],
[
75.801127,
35.934721
],
[
76.518622,
35.379154
],
[
77.309706,
35.137703
],
[
77.972008,
34.758986
],
[
78.376749,
34.241106
],
[
78.523927,
33.473647
],
[
78.7079,
32.978834
],
[
78.450338,
32.745921
],
[
78.30316,
32.340745
],
[
78.431941,
32.04349
],
[
78.671106,
31.572152
],
[
78.855079,
31.145879
],
[
79.425395,
30.797108
],
[
80.087697,
30.447053
],
[
81.301919,
29.855455
],
[
81.90903,
30.0157
],
[
82.7921,
29.485907
],
[
84.539843,
28.661613
],
[
85.71727,
28.124721
],
[
86.821108,
27.732537
],
[
87.998535,
27.69979
],
[
88.568851,
27.716165
],
[
88.863208,
27.108656
],
[
89.580703,
27.190949
],
[
89.654292,
27.765274
],
[
90.923705,
27.650651
],
[
91.751584,
27.223849
],
[
92.04594,
26.778874
],
[
92.965805,
26.646689
],
[
93.830478,
26.960375
],
[
94.860727,
27.453873
],
[
96.185332,
27.798001
],
[
97.123594,
27.503101
],
[
97.620321,
27.896122
],
[
97.675513,
28.059457
],
[
98.080254,
27.306056
],
[
98.595378,
27.009824
],
[
98.393008,
26.066566
],
[
97.804294,
25.483523
],
[
97.528335,
24.847254
],
[
97.417951,
24.10637
],
[
97.804294,
23.717348
],
[
98.595378,
23.886634
],
[
98.834543,
23.123105
],
[
99.239283,
22.697005
],
[
99.165694,
22.303805
],
[
99.386462,
21.857966
],
[
100.251135,
21.445169
],
[
100.839848,
21.290063
],
[
101.704521,
21.031186
],
[
102.05407,
21.152053
],
[
101.998878,
21.582901
],
[
101.962083,
22.132497
],
[
102.587591,
22.355156
],
[
103.599443,
22.338041
],
[
104.482513,
22.560368
],
[
105.383981,
22.799392
],
[
106.083078,
22.59454
],
[
106.469421,
22.286683
],
[
106.874162,
21.754879
],
[
107.315697,
21.514051
],
[
107.812424,
21.410715
],
[
107.775629,
21.134792
],
[
106.929353,
20.269201
],
[
106.175064,
19.17158
],
[
106.377435,
18.470789
],
[
107.297299,
17.23746
],
[
109.008248,
15.675143
],
[
109.688948,
13.705222
],
[
109.652153,
11.664031
],
[
108.750686,
9.571001
],
[
108.198767,
6.876803
],
[
108.493124,
5.090099
],
[
109.817729,
3.612656
],
[
111.10554,
3.298351
],
[
114.71141,
5.514272
],
[
116.256783,
7.556636
],
[
118.758815,
10.883133
],
[
119.531502,
13.669242
],
[
119.494707,
16.617614
],
[
120.414572,
18.961654
],
[
121.51841,
20.633358
],
[
122.751029,
22.303805
],
[
123.247756,
23.378111
],
[
124.811526,
25.68375
],
[
126.577667,
25.900278
],
[
127.479134,
26.67975
],
[
128.454191,
28.189945
],
[
128.766945,
29.93561
],
[
128.73015,
31.650877
],
[
127.957464,
32.153119
],
[
127.221572,
32.745921
],
[
127.019202,
33.596907
],
[
125.988953,
33.827543
],
[
125.731391,
34.546135
],
[
125.878569,
35.454458
],
[
125.731391,
36.634799
],
[
125.80498,
37.51927
],
[
124.425183,
37.972159
],
[
124.498772,
38.58128
],
[
125.013896,
39.242487
],
[
124.590758,
39.471014
],
[
124.296402,
39.840762
],
[
124.388388,
40.081441
],
[
124.940307,
40.335346
],
[
125.731391,
40.630357
],
[
126.448885,
40.96591
],
[
126.798434,
41.493704
],
[
127.111188,
41.410654
],
[
127.883875,
41.271998
],
[
128.490985,
41.452192
],
[
128.307012,
41.879854
],
[
128.950918,
41.921089
],
[
129.484439,
42.12686
],
[
129.999564,
42.549994
],
[
130.073153,
42.807915
],
[
130.404304,
42.495557
],
[
130.77225,
42.359256
],
[
130.698661,
42.726583
],
[
131.195388,
42.848541
],
[
131.360964,
43.494895
],
[
131.342566,
44.491021
],
[
131.820896,
45.002351
],
[
132.998323,
44.976239
],
[
133.623831,
45.599605
],
[
134.102161,
46.394582
],
[
134.37812,
47.228226
],
[
134.874847,
47.851127
],
[
134.985231,
48.233588
],
[
135.13241,
48.454352
],
[
135.077218,
48.474352
]
]
}
目录结构：
走到这一步，会遇到上面的报错，现在来说怎么解决：
- 关于百度地图api跨域报错：重点url中添加init
<script src="../../js/jquery-1.11.0.js"></script>
<script>
$(function() {
let url = 'http://api.map.baidu.com/api?v=2.0&ak=你的AK手动替换&callback=init';
$.getScript(url)
})
function init(data){
// 创建Map实例
var map = new BMap.Map("container");
// 初始化地图,设置中心点坐标和地图级别 使用的坐标为BD09
map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
}
2.关于json资源请求失败，区域绘制失败问题：启动本地服务 在项目目录下 cmd ,执行python -m http.server（前提安装python3,也可以通过别的方式）,服务启动后，浏览器访问http://localhost:8000/
点击demo4进入，完美
ENDING...
