地图模式

package-lock.json

@@ -14505,6 +14505,21 @@
       "integrity": "sha1-9rRQHC7EzdJrp4vnIilh3ndiFZg=",
       "dev": true
     },
+    "uppercamelcase": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npm.taobao.org/uppercamelcase/download/uppercamelcase-1.1.0.tgz",
+      "integrity": "sha1-Mk2YprOvx+iolT4QZBUJsOTiP5c=",
+      "requires": {
+        "camelcase": "^1.2.1"
+      },
+      "dependencies": {
+        "camelcase": {
+          "version": "1.2.1",
+          "resolved": "https://registry.npm.taobao.org/camelcase/download/camelcase-1.2.1.tgz",
+          "integrity": "sha1-m7UwTS4LVmmLLHWLCKPqqdqlijk="
+        }
+      }
+    },
     "uri-js": {
       "version": "4.2.2",
       "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.2.2.tgz",
@@ -14689,6 +14704,14 @@
       "resolved": "https://registry.npmjs.org/vue/-/vue-2.6.10.tgz",
       "integrity": "sha512-ImThpeNU9HbdZL3utgMCq0oiMzAkt1mcgy3/E6zWC/G6AaQoeuFdsl9nDhTDU3X1R6FK7nsIUuRACVcjI+A2GQ=="
     },
+    "vue-amap": {
+      "version": "0.5.10",
+      "resolved": "https://registry.npm.taobao.org/vue-amap/download/vue-amap-0.5.10.tgz",
+      "integrity": "sha1-RkUWIDrwwIXUBL2Kyr8kAeSjb/Y=",
+      "requires": {
+        "uppercamelcase": "^1.1.0"
+      }
+    },
     "vue-count-to": {
       "version": "1.0.13",
       "resolved": "https://registry.npmjs.org/vue-count-to/-/vue-count-to-1.0.13.tgz",

package.json

@@ -88,6 +88,7 @@
     "tui-editor": "^1.4.6",
     "v-viewer": "^1.5.1",
     "vue": "2.6.10",
+    "vue-amap": "^0.5.10",
     "vue-count-to": "^1.0.13",
     "vue-i18n": "^8.15.5",
     "vue-loader": "^15.9.1",

resources/js/api/map.js

+import request from '@/utils/request';
+
+class MapResource {
+  constructor() {
+  }
+  permissions(id) {
+    return request({
+      url: '/' + this.uri + '/' + id + '/permissions',
+      method: 'get',
+    });
+  }
+  fetchArticle(data) {
+    return request({
+      url: '/wxuser/seek',
+      method: 'post',
+      data,
+    });
+  }
+  updatePermission(id, permissions) {
+    return request({
+      url: '/' + this.uri + '/' + id + '/permissions',
+      method: 'put',
+      data: permissions,
+    });
+  }
+}
+
+export { MapResource as default };

resources/js/views/map/index.vue

 <template>
-  <div>地图模式</div>
+  <div class="amap-page-container" style="height: calc(100vh - 84px);">
+    <el-amap
+      ref="map"
+      vid="amapDemo"
+      :amap-manager="amapManager"
+      :zoom="zoom"
+      :center="center"
+      :events="events"
+      class="amap-demo"
+    >
+      <el-amap-marker
+        v-for="(marker, index) in markers"
+        :key="marker.id"
+        :position="marker.position"
+        :visible="markerVisible"
+        :content="marker.content"
+        :vid="index"
+        :clickable="true"
+        :events="marker.events"
+      ></el-amap-marker>
+      <el-amap-circle-marker
+        v-for="marker in markersDevice"
+        :key="marker.id"
+        :visible="markersDeviceVisible"
+        :center="marker.center"
+        :radius="marker.radius"
+        :fill-color="marker.fillColor"
+        :fill-opacity="marker.fillOpacity"
+        :stroke-color="'#ccc'"
+        :stroke-opacity="0.9"
+      ></el-amap-circle-marker>
+      <div class="toolbar">
+        <el-switch
+          v-model="markersDeviceVisible"
+          active-text="设备"
+        >
+        </el-switch>
+        <el-switch
+          v-model="markerVisible"
+          active-text="用户"
+        >
+        </el-switch>
+      </div>
+    </el-amap>
+  </div>
 </template>
 
 <script>
+import Vue from 'vue';
+import VueAMap from 'vue-amap';
+import { AMapManager } from 'vue-amap';
+
+Vue.use(VueAMap);
+
+// 初始化vue-amap
+VueAMap.initAMapApiLoader({
+  // 高德的key
+  key: '95cc1b89d62f020ce5a21ec503daef6c',
+  // 插件集合
+  plugin: [
+    'AMap.Autocomplete',
+    'AMap.PlaceSearch',
+    'AMap.Scale',
+    'AMap.OverView',
+    'AMap.ToolBar',
+    'AMap.MapType',
+    'AMap.PolyEditor',
+    'AMap.CircleEditor',
+  ],
+  // 高德 sdk 版本，默认为 1.4.4
+  v: '1.4.15',
+  uiVersion: '1.0.11',
+});
+
+export default {
+  data(){
+    const _this = this;
+    return {
+      map: {},
+      amapManager: new AMapManager(),
+      zoom: 6,
+      center: [114.505208, 38.045474],
+      events: {
+        init: (o) => {
+          o.setMapStyle('amap://styles/normal');
+          console.log(o.getCenter());
+          // console.log(this.$refs.map.$$getInstance());
+          o.getCity(result => {
+            console.log(result);
+          });
+        },
+        'moveend': () => {
+        },
+        'zoomchange': () => {
+          console.log('zoom:', _this.$refs.map);
+          _this.zoom = this.$refs.map.$$getInstance().getZoom();
+          console.log(_this.zoom);
+        },
+        'click': (e) => {
+          alert('map clicked');
+        },
+      },
+      plugin: ['ToolBar', {
+        pName: 'MapType',
+        defaultType: 0,
+        events: {
+          init(o) {
+            console.log(o);
+          },
+        },
+      }],
+      markerContent: '<div class="mapIcon"><span class="mapIcon_title">%name</span><span class="mapIcon_num_all">%num</span><span class="mapIcon_num">%alarm</span></div>',
+      markers: [],
+      markerVisible: true,
+      markersDevice: [],
+      markersDeviceVisible: false,
+    };
+  },
+  watch: {
+  },
+  mounted() {
+  },
+  created() {
+    const that = this;
+    this.markers = [
+      {
+        position: [114.505208, 38.045474],
+        content: this.rebuildContent('赢得企图', 10, 5),
+        userid: 1,
+        events: {
+          click() {
+            // alert(1);
+            that.getUserDevices([114.505208, 38.045474]);
+          },
+        },
+      },
+      {
+        position: [113.505208, 38.015474],
+        content: this.rebuildContent('正元化肥', 15, 0),
+        userid: 2,
+        events: {
+          click(e) {
+            // alert(2);
+            that.getUserDevices([113.505208, 38.015474]);
+          },
+        },
+      },
+    ];
+    this.markersDevice = [
+      {
+        center: [114.505208, 37.045474],
+        radius: 13,
+        fillColor: '#777',
+        fillOpacity: 0.8,
+      },
+      {
+        center: [112.505208, 37.045474],
+        radius: 13,
+        fillColor: '#750b17',
+        fillOpacity: 0.8,
+      },
+      {
+        center: [113.505208, 37.045474],
+        radius: 13,
+        fillColor: '#1c7a17',
+        fillOpacity: 0.8,
+      },
+    ];
+  },
+  methods: {
+    rebuildContent(content, deviceCount, alarmCount) {
+      let mcontent = this.markerContent;
+      mcontent = mcontent.replace(/%name/, content).replace(/%num/, deviceCount).replace(/%alarm/, alarmCount);
+      console.log(mcontent);
+      return mcontent;
+    },
+    getUserDevices(center) {
+      // alert(userid);
+      this.zoom = 13;
+      this.center = center;
+      this.markerVisible = false;
+      this.markersDeviceVisible = true;
+    },
+    getDeviceInfo(deviceId) {
+      alert(deviceId);
+    },
+  },
+};
 </script>
 
 <style>
+.amap-demo {
+  height: 300px;
+}
+.mapIcon{
+  vertical-align: middle;
+  color: #555;
+  background-color: #fffeef;
+  font-size: 12px;
+  white-space: nowrap;
+  position: relative;
+  border: 1px solid #8e8e8e;
+  width: auto;
+  border-radius: 5px 5px 5px 0;
+  height: 23px;
+  line-height: 23px;
+  /* top: 25px; */
+  /* left: -37px; */
+}
+.mapIcon_title{
+  padding: 5px;
+  border-radius: 5px 0 0 0;
+}
+.mapIcon_num{
+  padding: 0 5px;
+  display: inline-block;
+  height: 100%;
+  color: #fff;
+  background-color: #dc3912;
+  border-radius: 0 5px 5px 0;
+}
+.mapIcon_num_all{
+  padding: 0 5px;
+  display: inline-block;
+  height: 100%;
+  color: #fff;
+  background-color: #23e610;
+  /* border-radius: 0 5px 5px 0; */
+}
+.mapIcon:before, .mapIcon:after{
+  content: '';
+  display: block;
+  position: absolute;
+  width: 0;
+  height: 0;
+  border: solid rgba(0,0,0,0);
+  border-width: 6px;
+  /* left: 40px; */
+}
+.mapIcon:before{
+  bottom: -13px;
+  border-top-color: #8e8e8e;
+}
+.mapIcon:after{
+  bottom: -12px;
+  border-top-color: #fffeef;
+}
+.toolbar{
+  position: fixed;
+  top: 120px;
+  right: 40px;
+}
 </style>