前台

package.json

@@ -14,14 +14,16 @@
     "test:ci": "npm run lint && npm run test:unit"
   },
   "dependencies": {
+    "@amap/amap-jsapi-loader": "^1.0.1",
     "axios": "0.18.1",
     "core-js": "3.6.5",
-    "element-ui": "2.13.2",
+    "element-ui": "^2.15.12",
     "js-cookie": "2.2.0",
     "normalize.css": "7.0.0",
     "nprogress": "0.2.0",
     "path-to-regexp": "2.4.0",
     "vue": "2.6.10",
+    "vue-baidu-map": "^0.21.22",
     "vue-router": "3.0.6",
     "vuex": "3.1.0"
   },

public/index.html

@@ -15,3 +15,5 @@
     <!-- built files will be auto injected -->
   </body>
 </html>
+<!-- 引入高德地图API -->
+<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.15&key=44ea4ac03cbd3cefc6397e1af606a3c0"></script>

src/main.js

@@ -15,6 +15,35 @@ import router from './router'
 import '@/icons' // icon
 import '@/permission' // permission control
 
+//百度地图    全局注册一次性引入
+import BaiduMap from 'vue-baidu-map'
+
+/**
+ * 百度
+ */
+Vue.use(BaiduMap, {
+  /* 需要注册百度地图开发者来获取你的ak */
+  ak: 'tqZyKtiyv367BS34ve0D92UBadXlf3LP'
+})
+/**
+ * 高德
+ */
+import AMapLoader from "@amap/amap-jsapi-loader";
+
+AMapLoader.load({
+  'key': '44ea4ac03cbd3cefc6397e1af606a3c0',
+  'version': '2.0',   // 指定要加载的 JSAPI 的版本，缺少时默认为 1.4.15
+  'plugins': ['AMap.Scale','AMap.GeoJSON']           // 需要使用的的插件列表，如比例尺'AMap.Scale'等，更多插件请看官方文档
+}).then((AMap) => {
+  Vue.use(AMap)
+})
+Vue.prototype.mapJsKey = '44ea4ac03cbd3cefc6397e1af606a3c0'; // jsApi
+Vue.prototype.mapServiceKey = '5756347f1804ff075028f0888516402c'; // 服务端
+// 配置安全密钥
+window._AMapSecurityConfig = {
+  securityJsCode: '5690e34e121bb31129a44487f03bf7e5', //*  安全密钥
+};
+
 /**
  * If you don't want to use mock-server
  * you want to use MockJs for mock api

src/router/index.js

@@ -89,7 +89,42 @@ export const constantRoutes = [
       }
     ]
   },
-
+  {
+    path: '/百度地图',
+    component: Layout,
+    children: [
+      {
+        path: 'index',
+        name: '百度地图',
+        component: () => import('@/views/baidu/index'),
+        meta: { title: '百度地图', icon: '百度地图' }
+      }
+    ]
+  },
+  {
+    path: '/高德地图',
+    component: Layout,
+    children: [
+      {
+        path: 'index',
+        name: '高德地图',
+        component: () => import('@/views/gaode/index'),
+        meta: { title: '高德地图', icon: '高德地图' }
+      }
+    ]
+  },
+  {
+    path: '/websocket',
+    component: Layout,
+    children: [
+      {
+        path: 'index',
+        name: 'websocket',
+        component: () => import('@/views/websocket/index'),
+        meta: { title: 'websocket', icon: 'websocket' }
+      }
+    ]
+  },
   {
     path: '/nested',
     component: Layout,

src/views/baidu/index.vue

@@ -0,0 +1,135 @@
+<template>
+  <div>
+    <!--
+  scroll-wheel-zoom是是否可以缩放
+  @ready是图加载完后触发事件
+  center是位置定位
+  zoom是缩放大小限制
+  inertial-dragging是允许惯性拖拽
+  -->
+    <baidu-map
+      class="bm-view"
+      :zoom="15"
+      :center="center"
+      inertial-dragging
+      @ready="mapReady"
+      :scroll-wheel-zoom="true"
+    >
+      <!-- 定位控件   anchor="BMAP_ANCHOR_BOTTOM_RIGHT"代表放在右下角 -->
+      <bm-geolocation
+        anchor="BMAP_ANCHOR_BOTTOM_RIGHT"
+        :showAddressBar="true"
+        :autoLocation="true"
+      ></bm-geolocation>
+      <!-- 地区检索  keyword：关键字搜索   @searchcomplete：检索完成后的回调函数   auto-viewport：检索结束后是否自动调整地图事业  -->
+      <bm-local-search
+        :keyword="keyword"
+        @searchcomplete="search"
+        :auto-viewport="true"
+        class="search"
+      ></bm-local-search>
+      <!-- 缩放控件   anchor代表控件停靠位置   anchor="BMAP_ANCHOR_TOP_RIGHT"代表放在右上角-->
+      <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
+
+    </baidu-map>
+  </div>
+</template>
+<baidu-map>
+<!-- 其他组件... -->
+
+<button @click="startDrawing">开始圈选</button>
+</baidu-map>
+<script>
+
+export default {
+  data() {
+    return {
+      //定位位置信息
+      center:[],
+      //检索关键字
+      keyword: "",
+      //输入框input值
+      input3: "",
+    };
+  },
+
+  methods: {
+    startDrawing() {
+      this.drawingManager.open();
+    },
+    //输入框
+    inputfz() {
+      this.keyword = this.input3;
+    },
+    search(){},
+    //地图加载后的回调
+    mapReady({ BMap, map }) {
+      //保存this指向，因为在百度的回调中this不指向vue
+      const _this = this;
+      // 获取自动定位方法
+      var geolocation = new BMap.Geolocation();
+      // 获取自动定位获取的坐标信息
+      geolocation.getCurrentPosition(
+        function (r) {
+          console.log(r );
+          console.log(r.address.province );
+          console.log(r.address.city );
+          _this.center = {
+            lng: r.point.lng,
+            lat: r.point.lat,
+          };
+        },
+        //启用高精度
+        { enableHighAccuracy: true }
+      );
+    }
+  },
+  mapReady({ BMap, map }) {
+    // ...
+
+    // 创建DrawingManager对象
+    this.drawingManager = new BMapLib.DrawingManager(map, {
+      isOpen: false, // 是否开启绘制模式
+      enableDrawingTool: true, // 是否显示工具栏
+      drawingToolOptions: {
+        anchor: BMAP_ANCHOR_TOP_RIGHT, // 工具栏位置
+        offset: new BMap.Size(5, 5), // 偏移量
+      },
+      circleOptions: {
+        strokeWeight: 2, // 边线宽度
+        fillOpacity: 0.1, // 填充透明度
+        strokeStyle: "solid", // 边线样式
+      },
+    }); // 创建小区标记点
+    const point = new BMap.Point(经度, 纬度); // 替换为你的小区的经纬度坐标
+    const marker = new BMap.Marker(point);
+
+    // 将标记点添加到地图上
+    map.addOverlay(marker);
+  },
+  mounted() {
+    // ...
+
+    const drawingScript = document.createElement("script");
+    drawingScript.type = "text/javascript";
+    drawingScript.src =
+      "https://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.js";
+    document.head.appendChild(drawingScript);
+  },
+};
+</script>
+<style scoped>
+/* 给个宽高 */
+.bm-view {
+  height: 650px;
+  width: 700px;
+}
+.input-with-select {
+  width: 400px;
+  margin-bottom: 5px;
+}
+.search {
+  height: 300px;
+  overflow: auto;
+}
+</style>

src/views/gaode/index.vue

@@ -0,0 +1,107 @@
+<template>
+  <!-- 高德地图组件 -->
+  <div class="map">
+    <div class="map-search">
+      <div class="map-search__area">
+        <span class="search-title">地区：</span>
+        <el-cascader
+          v-model="areaValue"
+          :options="areaOptions"
+          :props="areaProps"
+          :teleported="false"
+          separator="-"
+          placeholder="请选择"
+          popper-class="dropDownPanel"
+          @change="handleAreaChange"
+        />
+      </div>
+    </div>
+    <div
+      v-loading="loading"
+      element-loading-text="数据更新中"
+      element-loading-spinner="el-icon-loading"
+      element-loading-background="rgba(25,81,135,0.7)"
+      id="qyContainer">
+    </div>
+  </div>
+</template>
+<script>
+// 引入地图插件
+import AMapLoader from '@amap/amap-jsapi-loader'
+// 引入 地址级联选择器和code码转换
+// import { regionDataPlus } from 'element-china-area-data'
+
+
+
+
+
+export default {
+  name: "GapDeMap",
+  data() {
+    return {
+      areaProps: { // 选择地区的属性
+        value: 'value',
+        label: 'label',
+        children: 'children'
+      },
+      areaOptions: regionDataPlus, // 地区选择的所有的数据
+      areaValue: ['330000', '330100', '330109'], // 地区选择参数，['省区域码', '市区域码']
+      loading: false, // 地图是否处于加载中
+
+      map: null, // 当前显示的地图区域对象
+      AMap: null // 拿到的所有的地图的对象
+    }
+  },
+  mounted() {
+    // 设置安全密钥
+    window._AMapSecurityConfig = {
+      // 必须配合秘钥使用，密钥需要生成，成为开发者之后创建应用即可。
+      securityJsCode: '5690e34e121bb31129a44487f03bf7e5'
+      // 应用密钥概览：https://console.amap.com/dev/key/app
+    }
+    this.init()
+  },
+  methods: {
+    init() {
+      this.$nextTick(() => {
+        AMapLoader.load({
+          key: "44ea4ac03cbd3cefc6397e1af606a3c0", // 申请好的Web端开发者Key，首次调用 load 时必填
+          version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
+          plugins: ['AMap.ToolBar', 'AMap.Scale', 'AMap.LngLat'], // 需要使用的的插件列表
+          AMapUI: {
+            version: '1.1',
+            plugins: ['overlay/SimpleMarker']
+          }
+        }).then((AMap) => {
+          this.AMap = AMap
+          // 初始化地图
+          this.map = new AMap.Map("qyContainer", { // 设置地图容器id
+            viewMode: "2D", // 是否为3D地图模式
+            zoom: 12, // 初始化地图级别
+            center: [120.458373, 30.190322] // 初始化地图中心点位置 萧山区
+          })
+
+          // 添加toolbar--放大缩小
+          const toolbar = new AMap.ToolBar()
+          this.map.addControl(toolbar)
+        }).catch(e => {
+          console.log(e)
+        })
+      })
+    },
+    // 更改地图的地区
+    handleAreaChange() {
+      // ...
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+#qyContainer{
+  padding:0px;
+  margin: 0px;
+  width: 700px;
+  height: 560px;
+}
+</style>
+

src/views/websocket/index.vue

@@ -0,0 +1,60 @@
+<div class="sence-box sence-box1">
+<div class="sence-in">
+  <div class="text-left text-box">掘金多多</div>
+  <div class="text-right text-box">大展鸿图</div>
+  <div class="long long-left"></div>
+  <div class="long long-right"></div>
+  <div class="denglong-box"></div>
+  <div class="long2 long2-left"></div>
+  <div class="long2 long2-right"></div>
+</div>
+</div>
+<div class="sence-box sence-box2">
+<div class="sence-in">
+  <div class="text-left text-box">步步高升</div>
+  <div class="text-right text-box">年年有鱼</div>
+  <div class="long long-left"></div>
+  <div class="long long-right"></div>
+  <div class="denglong-box"></div>
+  <div class="long2 long2-left"></div>
+  <div class="long2 long2-right"></div>
+  <div class="xiangyun"></div>
+</div>
+</div>
+<div class="sence-box sence-box3">
+<div class="sence-in">
+  <div class="text-left text-box">心想事成</div>
+  <div class="text-right text-box">万事如意</div>
+  <div class="long long-left"></div>
+  <div class="long long-right"></div>
+  <div class="denglong-box"></div>
+  <div class="long2 long2-left"></div>
+  <div class="long2 long2-right"></div>
+  <div class="xiangyun"></div>
+</div>
+</div>
+<div class="sence-box sence-box4">
+<div class="sence-in">
+  <div class="text-left text-box">蒸蒸日上</div>
+  <div class="text-right text-box">一帆风顺</div>
+  <div class="long long-left"></div>
+  <div class="long long-right"></div>
+  <div class="denglong-box"></div>
+  <div class="long2 long2-left"></div>
+  <div class="long2 long2-right"></div>
+  <div class="xiangyun"></div>
+</div>
+</div>
+<div class="sence-box sence-box5">
+<div class="sence-in">
+  <div class="text-left text-box">自强不息</div>
+  <div class="text-right text-box">恭喜发财</div>
+  <div class="sence-block">龙年大吉</div>
+  <div class="denglong-box"></div>
+  <div class="long long-left"></div>
+  <div class="long long-right"></div>
+  <div class="long2 long2-left"></div>
+  <div class="long2 long2-right"></div>
+  <div class="xiangyun"></div>
+</div>
+</div>

vue.config.js

@@ -46,6 +46,10 @@ module.exports = {
       alias: {
         '@': resolve('src')
       }
+    },
+    externals: {
+      'AMap': 'AMap',
+      'AMapUI': 'AMapUI'
     }
   },
   chainWebpack(config) {