├── .gitignore
├── img1.jpg
├── public
    ├── favicon.ico
    └── index.html
├── src
    ├── assets
    │   └── logo.png
    ├── main.js
    ├── App.vue
    └── components
    │   └── Index.vue
├── babel.config.js
├── vue.config.js
├── README.md
└── package.json


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules/
2 | 


--------------------------------------------------------------------------------
/img1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/LuoLingFie/geojson-baiduMap/HEAD/img1.jpg


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/LuoLingFie/geojson-baiduMap/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/LuoLingFie/geojson-baiduMap/HEAD/src/assets/logo.png


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: [
3 |     '@vue/cli-plugin-babel/preset'
4 |   ]
5 | }
6 | 


--------------------------------------------------------------------------------
/vue.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   publicPath: process.env.NODE_ENV === "production" ? "./" : "/",
3 |   assetsDir: "convertor",
4 |   lintOnSave: true,
5 | }


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import App from './App.vue'
 3 | import ElementUI from 'element-ui'
 4 | import 'element-ui/lib/theme-chalk/index.css'
 5 | 
 6 | Vue.use(ElementUI)
 7 | Vue.config.productionTip = false
 8 | 
 9 | new Vue({
10 |   render: h => h(App),
11 | }).$mount('#app')
12 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="app">
 3 |     <Index />
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script>
 8 | import Index from "./components/Index";
 9 | 
10 | export default {
11 |   name: "App",
12 |   components: {
13 |     Index,
14 |   },
15 | };
16 | </script>
17 | 
18 | <style>
19 | li,
20 | ul,
21 | html,
22 | p,
23 | body {
24 |   margin: 0;
25 |   padding: 0;
26 |   list-style-type: none;
27 | }
28 | html,
29 | body,
30 | #app {
31 |   width: 100%;
32 |   height: 100%;
33 | }
34 | #allmap .anchorBL {
35 |   display: none;
36 | }
37 | </style>
38 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # bmap
 2 | 
 3 | > 项目使用了 vue element Bmap
 4 | 
 5 | [在线地址：http://luodad.vip/book/convertor.html](http://luodad.vip/book/convertor.html)
 6 | 
 7 | ![Image text](./img1.jpg)
 8 | 
 9 | ## Build Setup
10 | 
11 | ``` bash
12 | # install dependencies
13 | npm install
14 | 
15 | # serve with hot reload at localhost:8080
16 | npm run dev
17 | 
18 | # build for production with minification
19 | npm run build
20 | 
21 | # build for production and view the bundle analyzer report
22 | npm run build --report
23 | ```
24 | 
25 | For a detailed explanation on how things work, check out the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader).
26 | 


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |   <meta charset="utf-8">
 6 |   <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7 |   <meta name="viewport" content="width=device-width,initial-scale=1.0">
 8 |   <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 9 |   <title>百度地图自定义规划</title>
10 | </head>
11 | 
12 | <body>
13 |   <noscript>
14 |     <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
15 |       Please enable it to continue.</strong>
16 |   </noscript>
17 |   <div id="app"></div>
18 |   <!-- built files will be auto injected -->
19 |   <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=2wX2aLMf5uXGakyTLimwdOGmVSnrzAGI"></script>
20 | </body>
21 | 
22 | </html>


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "geojson",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "serve": "vue-cli-service serve",
 7 |     "build": "vue-cli-service build",
 8 |     "lint": "vue-cli-service lint"
 9 |   },
10 |   "dependencies": {
11 |     "core-js": "^3.7.0",
12 |     "element-ui": "^2.14.0",
13 |     "file-saver": "^2.0.2",
14 |     "vue": "^2.6.12"
15 |   },
16 |   "devDependencies": {
17 |     "@vue/cli-plugin-babel": "^4.5.8",
18 |     "@vue/cli-plugin-eslint": "^4.5.8",
19 |     "@vue/cli-service": "^4.5.8",
20 |     "babel-eslint": "^10.1.0",
21 |     "eslint": "^6.8.0",
22 |     "eslint-plugin-vue": "^6.2.2",
23 |     "less": "^3.12.2",
24 |     "less-loader": "^7.0.2",
25 |     "vue-template-compiler": "^2.6.12"
26 |   },
27 |   "eslintConfig": {
28 |     "root": true,
29 |     "env": {
30 |       "node": true
31 |     },
32 |     "extends": [
33 |       "plugin:vue/essential",
34 |       "eslint:recommended"
35 |     ],
36 |     "parserOptions": {
37 |       "parser": "babel-eslint"
38 |     },
39 |     "rules": {}
40 |   },
41 |   "browserslist": [
42 |     "> 1%",
43 |     "last 2 versions",
44 |     "not dead"
45 |   ]
46 | }
47 | 


--------------------------------------------------------------------------------
/src/components/Index.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="hello">
  3 |     <!-- 工具快捷兰 -->
  4 |     <div class="hortcutBar">
  5 |       <!-- 导入JSON文件 -->
  6 |       <div class="importJSON">
  7 |         <el-button type="success" @click="importJSON" round>导入JSON文件</el-button>
  8 |         <input v-show="false" id="file" type="file" accept=".json" />
  9 |       </div>
 10 |       <!-- 添加规划名 -->
 11 |       <div class="lineName">
 12 |         <span>规划名:</span>
 13 |         <el-input v-model="lineName" placeholder="请输入规划名"></el-input>
 14 |         <span>创建规划:</span>
 15 |         <el-button @click="addLine" type="success" icon="el-icon-plus" circle></el-button>
 16 |       </div>
 17 |       <!-- 开启关闭地图绘制功能 -->
 18 |       <div class="drawLine">
 19 |         <span>规划列表：</span>
 20 |         <el-switch v-model="drawLine" active-color="#13ce66" inactive-color="#999">
 21 |         </el-switch>
 22 |       </div>
 23 |       <!-- 开启关闭地图绘制功能 -->
 24 |       <div class="drawLine">
 25 |         <span>鼠标喵点：</span>
 26 |         <el-switch v-model="lineMiao" @change="lineMiaoFn" active-color="#13ce66" inactive-color="#999">
 27 |         </el-switch>
 28 |       </div>
 29 |       <!-- 显示隐藏 规划列表 -->
 30 |       <div class="theCurrent">
 31 |         <p>当前正在编辑：</p>
 32 |         <strong>{{ theCurrent.name }}</strong>
 33 |         <p>ID:</p>
 34 |         <span>
 35 |           {{ theCurrent.index !== null ? theCurrent.index + 1 : "" }}</span>
 36 |       </div>
 37 |       <!-- 导出JSON文件 -->
 38 |       <el-button type="success" class="exportJSON" @click="exportJSON" round>导出JSON文件</el-button>
 39 |     </div>
 40 |     <!-- 规划列表 -->
 41 |     <div :class="{ showright: !drawLine }" class="plalistBox">
 42 |       <el-tabs v-model="activeName">
 43 |         <el-tab-pane label="编辑" name="first">
 44 |           <ul class="plalistBox-list">
 45 |             <li v-for="(item, index) in pointArr" :key="index">
 46 |               <p>{{ item.name }}</p>
 47 |               <el-button @click="theEditor(index, 1)" v-show="switchBtn.index==nill&&!switchBtn.off" :plain="true"
 48 |                 type="primary">
 49 |                 开折点
 50 |               </el-button>
 51 |               <el-button @click="theEditor(index, 0)" v-show="switchBtn.index==index&&switchBtn.off" :plain="true"
 52 |                 type="info">
 53 |                 关折点
 54 |               </el-button>
 55 |               <el-button :plain="true" type="success" @click="showlineJson">查坐标</el-button>
 56 |             </li>
 57 |           </ul>
 58 |         </el-tab-pane>
 59 |         <el-tab-pane label="无" name="second">无</el-tab-pane>
 60 |       </el-tabs>
 61 |     </div>
 62 |     <el-dialog title="当前规划坐标" :visible.sync="activeNameShow" width="30%" center>
 63 |       <span>{{ content }}</span>
 64 |       <span slot="footer" class="dialog-footer">
 65 |         <el-button type="primary" @click="activeNameShow = false">确 定</el-button>
 66 |       </span>
 67 |     </el-dialog>
 68 |     <!-- 地图 -->
 69 |     <div id="allmap"></div>
 70 |   </div>
 71 | </template>
 72 | 
 73 | <script>
 74 | // import BMap from "BMap";
 75 | import FileSaver from "file-saver";
 76 | export default {
 77 |   mounted() {
 78 |     // 创建地图 并且 设置定位
 79 |     this.newBmap();
 80 |   },
 81 |   data() {
 82 |     return {
 83 |       map: null, // 地图实例
 84 |       pointArr: [], // 手绘规划出来的所有点
 85 |       PolylineArr: [], // 地图上的规划实例
 86 |       PointCollectionArr: [], // 手绘时候添加的圆点实例
 87 |       drawLine: true, // 绘画列表显示隐藏
 88 |       lineMiao: false, // 是否开启鼠标绘制开关
 89 |       activeNameShow: false, // 查看当前单独坐标
 90 |       content: "", // 单独坐标
 91 |       lineName: "", // 规划线的名称
 92 |       activeName: "first", // tab栏当前页
 93 |       switchBtn: {
 94 |         index: null,
 95 |         off: false
 96 |       }, // 编辑折点线
 97 |       theCurrent: {
 98 |         index: null,
 99 |         name: "",
100 |       },
101 |     };
102 |   },
103 |   methods: {
104 |     // 创建地图 并且 设置定位
105 |     newBmap() {
106 |       let _this = this;
107 |       // 创建地图 并且 设置定位
108 |       var map = new BMap.Map("allmap", { enableMapClick: false });
109 |       new BMap.LocalCity().get((result) => {
110 |         map.centerAndZoom(result.center, 15);
111 |         map.enableScrollWheelZoom();
112 |         map.setCenter(result.name);
113 |       });
114 |       // 单击获取点击的经纬度\
115 |       map.addEventListener("click", function (e) {
116 |         // 判断有没有创建过至少一个 规划
117 |         if (_this.pointArr.length) {
118 |           // 判断是否开启了绘制功能
119 |           if (_this.lineMiao) {
120 |             let { index } = _this.theCurrent;
121 |             _this.pointArr[index].points.push(e.point);
122 |             _this.PolylineArr[index].setPath(_this.pointArr[index].points);
123 | 
124 |             //  添加点 添加点
125 |             let pointCollection = new BMap.PointCollection(
126 |               _this.pointArr[index].points,
127 |               {
128 |                 size: "BMAP_POINT_SIZE_HUGE",
129 |                 color: "#d340c3",
130 |               }
131 |             ); // 初始化PointCollection
132 |             _this.PointCollectionArr.push(pointCollection);
133 |             pointCollection.addEventListener("click", function (e) { });
134 |             map.addOverlay(pointCollection); // 添加Overlay
135 |             //  添加点 添加点
136 |             // }
137 |           }
138 |         }
139 |       });
140 |       // 创建地图 并且 设置定位
141 |       this.map = map;
142 |     },
143 |     // 添加规划
144 |     addLine() {
145 |       this.lineMiaoFn(false); // 取消鼠标喵点
146 |       if (this.lineName.trim() !== "") {
147 |         let obj = {
148 |           name: this.lineName,
149 |           points: [],
150 |         };
151 |         this.pointArr.push(obj); // 添加到初试数据
152 |         this.newPolyline([obj]); // 创建规划实例
153 |         this.theCurrent.name = this.lineName;
154 |         this.theCurrent.index = this.pointArr.length - 1;
155 |         this.lineName = "";
156 |         this.$notify({
157 |           message: "添加成功！",
158 |           type: "success",
159 |         });
160 |       } else {
161 |         this.$notify({
162 |           message: "必须要填写规划名哦！",
163 |           type: "warning",
164 |         });
165 |       }
166 |     },
167 |     // 创建规划百度实例
168 |     newPolyline(arr) {
169 |       arr.forEach((item) => {
170 |         let polyline = new BMap.Polyline(item.points, {
171 |           strokeColor: "blue",
172 |           strokeWeight: 3,
173 |           strokeOpacity: 1,
174 |         }); // 创建折线
175 |         this.map.addOverlay(polyline);
176 |         this.PolylineArr.push(polyline);
177 |       });
178 |     },
179 |     // 开启关闭当规划编辑
180 |     theEditor(index, bur) {
181 |       this.lineMiaoFn(false); // 取消鼠标喵点
182 |       this.switchBtn.index = index
183 |       if (bur) {
184 |         this.switchBtn.off = true;
185 |         this.theCurrent.name = this.pointArr[index].name;
186 |         this.theCurrent.index = index;
187 |         let yunBd = this.PolylineArr[index].ha || this.PolylineArr[index].Ao;
188 |         if (yunBd) {
189 |           let num = yunBd.length;
190 |           if (num) {
191 |             this.PolylineArr.forEach((item, ind) => {
192 |               if (ind === index) {
193 |                 item.enableEditing(); // 开启编辑
194 |               } else {
195 |                 item.disableEditing(); // 关闭编辑
196 |               }
197 |             });
198 |           } else {
199 |             this.$alert(
200 |               "当前规划一个点都没有！需要先画大致点位！",
201 |               "规划提示：",
202 |               {
203 |                 confirmButtonText: "确定",
204 |                 callback: (action) => {
205 |                   this.$notify({
206 |                     type: "success",
207 |                     message: "以开启当前规划的鼠标喵点！",
208 |                   });
209 |                   this.lineMiao = true;
210 |                   this.lineMiaoFn(true);
211 |                 },
212 |               }
213 |             );
214 |           }
215 |         } else {
216 |           this.$alert("百度坐标功能数组已更换。", "error：", {
217 |             confirmButtonText: "确定",
218 |           });
219 |         }
220 |       } else {
221 |         this.switchBtn = {
222 |           index: null,
223 |           off: false
224 |         }
225 |         this.PolylineArr[index].disableEditing();
226 |       }
227 |     },
228 |     // 查看单独坐标数据
229 |     showlineJson() {
230 |       const Target = this.PolylineArr[this.theCurrent.index]
231 |       let yunBd = Target.ha || Target.Ao;
232 |       if (yunBd) {
233 |         this.lineMiaoFn(false); // 取消鼠标喵点
234 |         this.activeNameShow = true;
235 |         this.content = JSON.stringify(yunBd);
236 |       } else {
237 |         this.$alert("百度坐标功能数组已更换。", "error：", {
238 |           confirmButtonText: "确定",
239 |         });
240 |       }
241 |     },
242 |     // 导出json文件
243 |     exportJSON() {
244 |       this.lineMiaoFn(false); // 取消鼠标喵点
245 |       if (this.pointArr.length) {
246 |         let yunBd = this.PolylineArr[0].ha || this.PolylineArr[0].Ao;
247 |         if (yunBd) {
248 |           this.PolylineArr.forEach((item, ind) => {
249 |             this.pointArr[ind].points = item.ha || item.Ao;
250 |           });
251 |           // 将json转换成字符串
252 |           let data = JSON.stringify(this.pointArr);
253 |           let blob = new Blob([data], { type: "" });
254 |           let myDate = new Date();
255 |           let YY = myDate.getFullYear();
256 |           let MM = myDate.getMonth() + 1;
257 |           if (MM < 10) MM = `0${MM}`;
258 |           let dd = myDate.getDate();
259 |           if (dd < 10) dd = `0${dd}`;
260 |           let h = myDate.getHours();
261 |           if (h < 10) h = `0${h}`;
262 |           let m = myDate.getMinutes();
263 |           if (m < 10) m = `0${m}`;
264 |           FileSaver.saveAs(blob, `行政区规划 ${YY}${MM}${dd}${h}${m}.json`);
265 |           this.$notify({
266 |             message: "导出成功！",
267 |             type: "success",
268 |           });
269 |         } else {
270 |           this.$alert("百度坐标功能数组已更换。", "error：", {
271 |             confirmButtonText: "确定",
272 |           });
273 |         }
274 |       } else {
275 |         this.$notify({
276 |           message: "您一个点都没有画哦！",
277 |           type: "warning",
278 |         });
279 |       }
280 |     },
281 |     // 导入json
282 |     importJSON() {
283 |       this.lineMiaoFn(false); // 取消鼠标喵点
284 |       let fn = () => {
285 |         let file = document.getElementById("file");
286 |         let _this = this;
287 |         file.onchange = (e) => {
288 |           _this.pointArr = [];
289 |           _this.PolylineArr = [];
290 |           let reader = new FileReader();
291 |           reader.readAsText(document.getElementById("file").files[0]);
292 |           reader.onload = function () {
293 |             _this.map.clearOverlays(); // 清除所有的撒点
294 |             // this.result为读取到的json字符串，需转成json对象
295 |             let jsonData = JSON.parse(this.result);
296 |             if (Array.isArray(jsonData)) {
297 |               const NewJsonData = jsonData.map((item) => {
298 |                 if (item.points && Array.isArray(item.points)) {
299 |                   let pts = [];
300 |                   item.points.forEach((v, i) => {
301 |                     pts.push(new BMap.Point(v.lng, v.lat));
302 |                   });
303 |                   item.points = pts;
304 |                 } else item.points = [];
305 |                 return item;
306 |               });
307 |               _this.pointArr = NewJsonData;
308 |               _this.newPolyline(NewJsonData);
309 |               _this.$notify({
310 |                 message: "导入成功！",
311 |                 type: "success",
312 |               });
313 |             } else {
314 |               this.$notify({
315 |                 message: "您导入到JSON文件无效！",
316 |                 type: "warning",
317 |               });
318 |             }
319 |           };
320 |         };
321 |         // 模拟input点击事件
322 |         var evt = new MouseEvent("click", {
323 |           bubbles: false,
324 |           cancelable: true,
325 |           view: window,
326 |         });
327 |         file.dispatchEvent(evt);
328 |       };
329 |       if (this.pointArr.length) {
330 |         this.$confirm("地图上已经有画过了哦，确定重新载入？", "提示", {
331 |           confirmButtonText: "确定",
332 |           cancelButtonText: "取消",
333 |           type: "warning",
334 |         }).then(() => {
335 |           fn();
336 |         });
337 |       } else {
338 |         fn();
339 |       }
340 |     },
341 |     // 描绘地图 开关 触发事件
342 |     lineMiaoFn(e) {
343 |       if (e) {
344 |         if (!this.pointArr.length) {
345 |           this.$notify({
346 |             type: "info",
347 |             message: "请先创建一个规划!",
348 |           });
349 |           this.lineMiao = false;
350 |         } else {
351 |           let { name } = this.theCurrent;
352 |           if (name.trim() === "") {
353 |             this.$notify({
354 |               type: "info",
355 |               message: "请在列表先开启一个规划编辑！",
356 |             });
357 |             this.lineMiao = false;
358 |           } else {
359 |             this.map.setDefaultCursor("crosshair"); // 设置地图默认的鼠标指针样式    十字架型
360 |             this.map.setDraggingCursor("crosshair"); // 设置地图拖拽时的鼠标指针样式
361 |           }
362 |         }
363 |       } else {
364 |         this.map.setDefaultCursor("pointer"); // 设置地图默认的鼠标指针样式    手型
365 |         this.map.setDraggingCursor("pointer"); // 设置地图拖拽时的鼠标指针样式
366 |         this.lineMiao = false;
367 |         this.PointCollectionArr.forEach((item) => {
368 |           this.map.removeOverlay(item);
369 |         });
370 |         this.PointCollectionArr = [];
371 |       }
372 |     },
373 |   },
374 |   watch: {},
375 | };
376 | </script>
377 | 
378 | <style lang="less">
379 | .hello {
380 |   .plalistBox .el-tabs__content {
381 |     height: calc(100% - 55px);
382 |   }
383 | }
384 | </style>
385 | <!-- Add "scoped" attribute to limit CSS to this component only -->
386 | <style scoped lang="less">
387 | .hello,
388 | #allmap {
389 |   width: 100%;
390 |   height: 100%;
391 | }
392 | .hello {
393 |   // 快捷栏
394 |   .hortcutBar {
395 |     width: 100%;
396 |     height: 50px;
397 |     background-color: rgb(255, 255, 255);
398 |     position: fixed;
399 |     top: 0;
400 |     left: 0;
401 |     z-index: 9;
402 |     box-shadow: 0 8px 5px rgba(0, 0, 0, 0.4);
403 |     display: flex;
404 |     // 导出json文件
405 |     .exportJSON {
406 |       position: absolute;
407 |       right: -15px;
408 |       top: 0;
409 |       height: 100%;
410 |     }
411 |     // 倒入json文件
412 |     .importJSON {
413 |       height: 100%;
414 |       position: relative;
415 |       left: -15px;
416 |       button {
417 |         height: 100%;
418 |       }
419 |     }
420 |     // 地图绘制开关
421 |     .drawLine {
422 |       padding: 13px 10px 0 10px;
423 |       span {
424 |         color: coral;
425 |       }
426 |     }
427 |     // 输入规划名 并且添加
428 |     .lineName {
429 |       padding: 4px 10px 0 10px;
430 |       span {
431 |         color: coral;
432 |       }
433 |       & > div {
434 |         display: inline-block;
435 |         width: 150px;
436 |       }
437 |       & > button {
438 |         // float: right;
439 |       }
440 |     }
441 |     // 当前编辑的样式
442 |     .theCurrent {
443 |       line-height: 50px;
444 |       display: inline-block;
445 |       color: coral;
446 |       display: flex;
447 |       strong {
448 |         width: 100px;
449 |         color: #8634fd;
450 |         font-weight: 700;
451 |         font-size: 20px;
452 |         white-space: nowrap;
453 |         overflow: hidden;
454 |         text-overflow: ellipsis;
455 |       }
456 |       span {
457 |         color: #8634fd;
458 |         font-weight: 700;
459 |         font-size: 20px;
460 |       }
461 |     }
462 |   }
463 |   // 规划列表盒子
464 |   .plalistBox {
465 |     box-sizing: border-box;
466 |     padding: 10px;
467 |     position: fixed;
468 |     right: 10px;
469 |     top: 60px;
470 |     z-index: 999;
471 |     height: calc(95% - 50px);
472 |     width: 300px;
473 |     box-shadow: -8px 8px 5px rgba(0, 0, 0, 0.4);
474 |     background-color: #fff;
475 |     transition: right 0.4s;
476 |     &.showright {
477 |       right: -320px;
478 |     }
479 |     > div {
480 |       height: 100%;
481 |       .el-tabs__content {
482 |       }
483 |     }
484 |     .plalistBox-list {
485 |       overflow: auto;
486 |       // height: 525px;
487 |       li {
488 |         border-bottom: 1px solid gainsboro;
489 |         box-sizing: border-box;
490 |         padding: 5px 0;
491 |         display: flex;
492 |         p {
493 |           flex: 1;
494 |           color: cadetblue;
495 |           display: inline-block;
496 |           white-space: nowrap;
497 |           overflow: hidden;
498 |           text-overflow: ellipsis;
499 |         }
500 |         button {
501 |           padding: 5px;
502 |           // width: 20px;
503 |           // height: 30px;
504 |         }
505 |       }
506 |       &::-webkit-scrollbar {
507 |         width: 5px;
508 |         height: 5px;
509 |       }
510 |       /*定义滚动条轨道 内阴影+圆角*/
511 |       &::-webkit-scrollbar-track {
512 |         background-color: #eee;
513 |       }
514 |       /*定义滑块 内阴影+圆角*/
515 |       &::-webkit-scrollbar-thumb {
516 |         border-radius: 10px;
517 |         background-color: #555;
518 |       }
519 |     }
520 |   }
521 |   // 地图
522 |   #allmap {
523 |     width: 100%;
524 |     height: 100%;
525 |   }
526 | }
527 | </style>
528 | 


--------------------------------------------------------------------------------