update

src/views/resource/resource.vue

@@ -3,7 +3,62 @@
     <el-row>
       <el-col :span="24">
         <div id="container">
-          <el-amap class="amap-box" :vid="'amap-vue'"></el-amap>
+          <!-- 自定义列表 -->
+          <div style="width:200px" class="menus">
+            <el-menu @select="typeSelect">
+              <el-submenu index="1">
+                <template #title>
+                  <span>一级分类(20)</span>
+                </template>
+                <el-menu-item-group>
+                  <el-submenu index="1-1">
+                    <template #title>
+                      <span>1-3环</span>
+                    </template>
+                    <el-menu-item index="1-1-1">力旺系</el-menu-item>
+                    <el-menu-item index="1-2-2">南湖系</el-menu-item>
+                  </el-submenu>
+                </el-menu-item-group>
+              </el-submenu>
+              <el-submenu index="2">
+                <template #title>
+                  <span>一级分类(10)</span>
+                </template>
+                <el-menu-item-group>
+                  <el-submenu index="2-1">
+                    <template #title>
+                      <span>3环开外</span>
+                    </template>
+                    <el-menu-item index="2-1-1">农大系</el-menu-item>
+                  </el-submenu>
+                </el-menu-item-group>
+              </el-submenu>
+            </el-menu>
+          </div>
+          <!-- 搜索框 -->
+          <el-amap-search-box class="search-box" :search-option="searchOption" :on-search-result="onSearchResult"></el-amap-search-box>
+          <el-amap class="amap-box" :vid="'amap-vue'" :zoom="zoom" :center="center" :plugin="plugin">
+            <!-- mark上方文字 -->
+            <el-amap-text v-for="(t, index) in marktext" :key="`text${index}`" :text="t.text" :offset="[0, -50]" :position="t.position"></el-amap-text>
+            <!-- 标记 -->
+            <el-amap-marker
+              v-for="(i, index) in markers"
+              :key="`mark${index}`"
+              :position="i.position"
+              :events="i.events"
+              :title="i.title"
+              :vid="index"
+            ></el-amap-marker>
+            <!-- 信息框体 -->
+            <el-amap-info-window :position="window.position" :visible="window.visible" :events="window.events" :autoMove="true">
+              <el-row>
+                <el-col :span="24">
+                  <el-link type="primary">标题:{{ windowInfo.title }}</el-link>
+                </el-col>
+                <el-col :span="24">pic:{{ windowInfo.pic }}</el-col>
+              </el-row>
+            </el-amap-info-window>
+          </el-amap>
         </div>
       </el-col>
     </el-row>
@@ -11,6 +66,7 @@
 </template>
 
 <script>
+const _ = require('lodash');
 import { mapState, createNamespacedHelpers } from 'vuex';
 import VueAMap from 'vue-amap';
 import Vue from 'vue';
@@ -23,21 +79,503 @@ export default {
   props: {},
   components: {},
   data: function() {
-    return {};
+    return {
+      zoom: '17',
+      center: [125.291162, 43.838597], //初始定位到中心
+      // 标记点列表
+      markers: [],
+      // 标记点提示
+      marktext: [],
+      // 窗体信息
+      window: {
+        position: [125.291162, 43.838597],
+        visible: false,
+      },
+      windowInfo: { name: 'an', pic: 'pic' },
+      // 搜索框
+      searchOption: {
+        city: '长春',
+        citylimit: true,
+      },
+      // 插件
+      plugin: [
+        {
+          pName: 'Scale',
+          events: {
+            init(instance) {},
+          },
+        },
+      ],
+      // 数据
+      list: [
+        {
+          id: 'B0FFGY6JEE',
+          name: '力旺广场',
+          type: '购物服务;商场;普通商场',
+          location: { Q: 43.840745, R: 125.290821, lng: 125.290821, lat: 43.840745 },
+          address: '前进大街旁',
+          tel: '0431-81338098',
+          distance: '__vue_devtool_nan__',
+          shopinfo: '0',
+          lat: 43.840745,
+          lng: 125.290821,
+        },
+        {
+          id: 'B0FFH2A0ZH',
+          name: '力旺广场B座',
+          type: '商务住宅;楼宇;商务写字楼',
+          location: { Q: 43.840772, R: 125.29062299999998, lng: 125.290623, lat: 43.840772 },
+          address: '前进大街996号力旺广场',
+          tel: '0431-81296666',
+          distance: '__vue_devtool_nan__',
+          shopinfo: '0',
+          lat: 43.840772,
+          lng: 125.290623,
+        },
+        {
+          id: 'B0FFH62X6K',
+          name: '力旺广场',
+          type: '风景名胜;公园广场;公园广场',
+          location: { Q: 43.942781, R: 125.36932200000001, lng: 125.369322, lat: 43.942781 },
+          address: '金钱路力旺康城1期',
+          tel: '',
+          distance: '__vue_devtool_nan__',
+          shopinfo: '2',
+          lat: 43.942781,
+          lng: 125.369322,
+        },
+        {
+          id: 'B0FFH29EHL',
+          name: '力旺广场写字楼C栋',
+          type: '商务住宅;楼宇;商务写字楼',
+          location: { Q: 43.840163, R: 125.29054100000002, lng: 125.290541, lat: 43.840163 },
+          address: '前进大街996号力旺广场',
+          tel: '',
+          distance: '__vue_devtool_nan__',
+          shopinfo: '0',
+          lat: 43.840163,
+          lng: 125.290541,
+        },
+        {
+          id: 'B0FFL7FPXU',
+          name: '力旺广场(1号门)',
+          type: '通行设施;临街院门;临街院门',
+          location: { Q: 43.84039, R: 125.29037, lng: 125.29037, lat: 43.84039 },
+          address: '前进大街996号',
+          tel: '',
+          distance: '__vue_devtool_nan__',
+          shopinfo: '2',
+          lat: 43.84039,
+          lng: 125.29037,
+        },
+        {
+          id: 'B0FFHZXXDI',
+          name: '力旺广场(西门)',
+          type: '通行设施;临街院门;临街院门',
+          location: { Q: 43.84208, R: 125.29029200000002, lng: 125.290292, lat: 43.84208 },
+          address: '前进大街990号附近',
+          tel: '',
+          distance: '__vue_devtool_nan__',
+          shopinfo: '2',
+          lat: 43.84208,
+          lng: 125.290292,
+        },
+        {
+          id: 'B0FFM88ZHZ',
+          name: '力旺广场(3号门)',
+          type: '通行设施;临街院门;临街院门',
+          location: { Q: 43.840071, R: 125.29147, lng: 125.29147, lat: 43.840071 },
+          address: '前进大街996号',
+          tel: '',
+          distance: '__vue_devtool_nan__',
+          shopinfo: '2',
+          lat: 43.840071,
+          lng: 125.29147,
+        },
+        {
+          id: 'B0FFLD96C2',
+          name: '力旺广场(3A号门)',
+          type: '通行设施;临街院门;临街院门',
+          location: { Q: 43.840601, R: 125.29088999999999, lng: 125.29089, lat: 43.840601 },
+          address: '前进大街996号',
+          tel: '',
+          distance: '__vue_devtool_nan__',
+          shopinfo: '2',
+          lat: 43.840601,
+          lng: 125.29089,
+        },
+        {
+          id: 'B0FFIR6YOH',
+          name: '力旺广场A座',
+          type: '商务住宅;商务住宅相关;商务住宅相关',
+          location: { Q: 43.841961, R: 125.29061100000001, lng: 125.290611, lat: 43.841961 },
+          address: '前进大街996号力旺广场',
+          tel: '',
+          distance: '__vue_devtool_nan__',
+          shopinfo: '0',
+          lat: 43.841961,
+          lng: 125.290611,
+        },
+        {
+          id: 'B0FFIR6YOB',
+          name: '力旺广场D座',
+          type: '商务住宅;商务住宅相关;商务住宅相关',
+          location: { Q: 43.840163, R: 125.29054200000002, lng: 125.290542, lat: 43.840163 },
+          address: '前进大街996号力旺广场d栋',
+          tel: '',
+          distance: '__vue_devtool_nan__',
+          shopinfo: '0',
+          lat: 43.840163,
+          lng: 125.290542,
+        },
+      ],
+      list2: [
+        {
+          id: 'B01AF07OT6',
+          name: '南湖公园',
+          type: '风景名胜;公园广场;公园',
+          location: { Q: 43.856452, R: 125.30678899999998, lng: 125.306789, lat: 43.856452 },
+          address: '工农大路2715号',
+          tel: '0431-85663059;0431-85664455',
+          distance: '__vue_devtool_nan__',
+          shopinfo: '2',
+          lat: 43.856452,
+          lng: 125.306789,
+        },
+        {
+          id: 'BV10111530',
+          name: '南湖公园(公交站)',
+          type: '交通设施服务;公交车站;公交车站相关',
+          location: { Q: 43.859222, R: 125.31698599999999, lng: 125.316986, lat: 43.859222 },
+          address: '232路;270路;277路;315路;62路',
+          tel: '',
+          distance: '__vue_devtool_nan__',
+          shopinfo: '2',
+          lat: 43.859222,
+          lng: 125.316986,
+        },
+        {
+          id: 'B01AF02511',
+          name: '南湖公园-长春解放纪念碑',
+          type: '风景名胜;风景名胜;风景名胜',
+          location: { Q: 43.862086, R: 125.30811299999999, lng: 125.308113, lat: 43.862086 },
+          address: '工农大路51号南湖公园(近建昌街)',
+          tel: '0431-85664455',
+          distance: '__vue_devtool_nan__',
+          shopinfo: '2',
+          lat: 43.862086,
+          lng: 125.308113,
+        },
+        {
+          id: 'B01AF0CKC8',
+          name: '南湖公园(3号门)',
+          type: '通行设施;临街院门;临街院门',
+          location: { Q: 43.862941, R: 125.30814399999997, lng: 125.308144, lat: 43.862941 },
+          address: '工农大路51号南湖公园附近',
+          tel: '',
+          distance: '__vue_devtool_nan__',
+          shopinfo: '2',
+          lat: 43.862941,
+          lng: 125.308144,
+        },
+        {
+          id: 'B01AF0B6EB',
+          name: '南湖公园-沙滩浴场',
+          type: '体育休闲服务;运动场馆;海滨浴场',
+          location: { Q: 43.852974, R: 125.31971099999998, lng: 125.319711, lat: 43.852974 },
+          address: '工农大路与昂昂溪路交汇处西100米',
+          tel: '',
+          distance: '__vue_devtool_nan__',
+          shopinfo: '0',
+          lat: 43.852974,
+          lng: 125.319711,
+        },
+        {
+          id: 'B0FFFRCYR9',
+          name: '南湖公园-荷花池',
+          type: '风景名胜;风景名胜相关;旅游景点',
+          location: { Q: 43.859825, R: 125.30918099999997, lng: 125.309181, lat: 43.859825 },
+          address: '南湖公园内',
+          tel: '',
+          distance: '__vue_devtool_nan__',
+          shopinfo: '2',
+          lat: 43.859825,
+          lng: 125.309181,
+        },
+        {
+          id: 'B0FFFTN0A1',
+          name: '南湖公园(南3门)',
+          type: '通行设施;临街院门;临街院门',
+          location: { Q: 43.850824, R: 125.293613, lng: 125.293613, lat: 43.850824 },
+          address: '南湖大路南湖公园',
+          tel: '',
+          distance: '__vue_devtool_nan__',
+          shopinfo: '2',
+          lat: 43.850824,
+          lng: 125.293613,
+        },
+        {
+          id: 'B0FFIC9UPB',
+          name: '南湖公园(南1号门)',
+          type: '通行设施;临街院门;临街院门',
+          location: { Q: 43.851119, R: 125.31657200000001, lng: 125.316572, lat: 43.851119 },
+          address: '南湖大路南湖大桥东',
+          tel: '',
+          distance: '__vue_devtool_nan__',
+          shopinfo: '2',
+          lat: 43.851119,
+          lng: 125.316572,
+        },
+        {
+          id: 'B0FFJO7O4R',
+          name: '南湖公园(西北5门)',
+          type: '通行设施;临街院门;临街院门',
+          location: { Q: 43.862738, R: 125.30659100000003, lng: 125.306591, lat: 43.862738 },
+          address: '工农大路2715号',
+          tel: '',
+          distance: '__vue_devtool_nan__',
+          shopinfo: '2',
+          lat: 43.862738,
+          lng: 125.306591,
+        },
+        {
+          id: 'B0FFH2ITPR',
+          name: '南湖公园(东北1门)',
+          type: '通行设施;临街院门;临街院门',
+          location: { Q: 43.858587, R: 125.31510400000002, lng: 125.315104, lat: 43.858587 },
+          address: '同志街与工农大路交叉口西北100米',
+          tel: '',
+          distance: '__vue_devtool_nan__',
+          shopinfo: '2',
+          lat: 43.858587,
+          lng: 125.315104,
+        },
+      ],
+      list3: [
+        {
+          id: 'B01AF09G3A',
+          name: '吉林农业大学',
+          type: '科教文化服务;学校;高等院校',
+          location: { Q: 43.809821, R: 125.41048699999999, lng: 125.410487, lat: 43.809821 },
+          address: '新城大街2888号',
+          tel: '0431-84533101;0431-84532980;0431-84532983',
+          distance: '__vue_devtool_nan__',
+          shopinfo: '0',
+          lat: 43.809821,
+          lng: 125.410487,
+        },
+        {
+          id: 'BV10110500',
+          name: '农大(公交站)',
+          type: '交通设施服务;公交车站;公交车站相关',
+          location: { Q: 43.816765, R: 125.40742499999999, lng: 125.407425, lat: 43.816765 },
+          address: '341路;349路',
+          tel: '',
+          distance: '__vue_devtool_nan__',
+          shopinfo: '2',
+          lat: 43.816765,
+          lng: 125.407425,
+        },
+        {
+          id: 'BV10110589',
+          name: '吉林农大(公交站)',
+          type: '交通设施服务;公交车站;公交车站相关',
+          location: { Q: 43.816803, R: 125.40744000000001, lng: 125.40744, lat: 43.816803 },
+          address: '103路;115路;341路;342路;343路;345路;346路;348路;349路;350路',
+          tel: '',
+          distance: '__vue_devtool_nan__',
+          shopinfo: '2',
+          lat: 43.816803,
+          lng: 125.40744,
+        },
+        {
+          id: 'B0FFH2KIYR',
+          name: '农大社区',
+          type: '商务住宅;住宅区;住宅小区',
+          location: { Q: 43.817344, R: 125.41352699999999, lng: 125.413527, lat: 43.817344 },
+          address: '净月旅游开发区新城大街与博学路交汇',
+          tel: '13179045829',
+          distance: '__vue_devtool_nan__',
+          shopinfo: '0',
+          lat: 43.817344,
+          lng: 125.413527,
+        },
+        {
+          id: 'B0FFKDO9ZT',
+          name: '农大老区',
+          type: '商务住宅;住宅区;住宅小区',
+          location: { Q: 43.817121, R: 125.41370599999999, lng: 125.413706, lat: 43.817121 },
+          address: '净月旅游开发区',
+          tel: '',
+          distance: '__vue_devtool_nan__',
+          shopinfo: '0',
+          lat: 43.817121,
+          lng: 125.413706,
+        },
+        {
+          id: 'BV10454240',
+          name: '农大宿舍(公交站)',
+          type: '交通设施服务;公交车站;公交车站相关',
+          location: { Q: 43.820824, R: 125.41961700000002, lng: 125.419617, lat: 43.820824 },
+          address: '158路东环',
+          tel: '',
+          distance: '__vue_devtool_nan__',
+          shopinfo: '2',
+          lat: 43.820824,
+          lng: 125.419617,
+        },
+        {
+          id: 'B0FFFGXVEZ',
+          name: '君安驾校农大直属分校',
+          type: '科教文化服务;驾校;驾校',
+          location: { Q: 43.821857, R: 125.41017499999998, lng: 125.410175, lat: 43.821857 },
+          address: '新城大街1888号',
+          tel: '',
+          distance: '__vue_devtool_nan__',
+          shopinfo: '1',
+          lat: 43.821857,
+          lng: 125.410175,
+        },
+        {
+          id: 'B0FFLC02A9',
+          name: '农大老区42号楼双凤学堂',
+          type: '科教文化服务;科教文化场所;科教文化场所',
+          location: { Q: 43.818345, R: 125.41272200000003, lng: 125.412722, lat: 43.818345 },
+          address: '紫薇街',
+          tel: '',
+          distance: '__vue_devtool_nan__',
+          shopinfo: '0',
+          lat: 43.818345,
+          lng: 125.412722,
+        },
+        {
+          id: 'B0FFH6FRPL',
+          name: '永兴街道办事处农大社区党校',
+          type: '科教文化服务;学校;学校',
+          location: { Q: 43.818295, R: 125.41407500000003, lng: 125.414075, lat: 43.818295 },
+          address: '博学路南200米',
+          tel: '',
+          distance: '__vue_devtool_nan__',
+          shopinfo: '0',
+          lat: 43.818295,
+          lng: 125.414075,
+        },
+        {
+          id: 'B01AF0ZQXP',
+          name: '吉林农业大学教学科研基地',
+          type: '科教文化服务;科研机构;科研机构',
+          location: { Q: 43.816967, R: 125.406455, lng: 125.406455, lat: 43.816967 },
+          address: '新城大街2555号',
+          tel: '',
+          distance: '__vue_devtool_nan__',
+          shopinfo: '0',
+          lat: 43.816967,
+          lng: 125.406455,
+        },
+      ],
+    };
   },
   created() {
     this.handlemyMapFn();
   },
   methods: {
+    // 搜索框回调
+    onSearchResult(pois) {
+      let latSum = 0;
+      let lngSum = 0;
+      if (pois.length > 0) {
+        // 只处理第一个结果了
+        const r = this.setMark(_.head(pois));
+        const { position } = r;
+        this.center = position;
+      }
+    },
+    // 添加标记
+    setMark(place) {
+      let name = _.get(place, 'name');
+      let lng = _.get(place, 'lng');
+      let lat = _.get(place, 'lat');
+      let position = [lng, lat];
+      let obj = {
+        position: position,
+        events: {
+          click: () => {
+            this.markClick(position);
+          },
+        },
+        title: `${name}`,
+        label: { content: 'lable', offset: [3, 3] },
+        desc: 'abc',
+      };
+      let text = {
+        position: position,
+        text: name,
+      };
+      let isDiff = this.markers.find(f => _.isEqual(f.position, position));
+      if (!isDiff) {
+        this.markers.push(obj);
+        this.marktext.push(text);
+      }
+      return obj;
+    },
+    // 初始化地图
     handlemyMapFn() {
       VueAMap.initAMapApiLoader({
-        key: '4674208108af32f72dbcd161cd915c94',
+        key: '47947a002b2cddf99df02a1a5b1bc198',
         plugin: [
           'AMap.PolyEditor', //编辑 折线多，边形
+          'AMap.PlaceSearch', // 查询
+          'AMap.Autocomplete',
+          'AMap.Scale',
+          'AMap.OverView',
+          'AMap.ToolBar',
+          'AMap.MapType',
+          'AMap.PolyEditor',
+          'AMap.CircleEditor',
         ], // 默认高德 sdk 版本为 1.4.4
         v: '1.4.4',
       });
     },
+    // 标记点击
+    markClick(posi) {
+      const r = this.markers.find(f => _.isEqual(f.position, posi));
+      // 设置窗口信息,自定义.反正在slot里的字段对上
+      const info = {
+        title: r.title,
+        pic: 'pic',
+      };
+      this.$set(this, `windowInfo`, info);
+      // 设置窗口信息
+      const obj = {
+        position: r.position,
+        visible: true,
+        events: {
+          close: () => {
+            // 初始化
+            this.$set(this, `window`, { position: [125.291162, 43.838597], visible: false });
+          },
+        },
+      };
+      this.$set(this, `window`, obj);
+    },
+    // 点击导航菜单
+    typeSelect(index) {
+      this.$set(this, `markers`, []);
+      this.$set(this, `marktext`, []);
+      if (index === '2-1-1') {
+        for (const i of this.list3) {
+          this.setMark(i);
+        }
+      } else if (index === '1-1-1') {
+        for (const i of this.list) {
+          this.setMark(i);
+        }
+      } else {
+        for (const i of this.list2) {
+          this.setMark(i);
+        }
+      }
+    },
   },
   computed: {
     ...mapState(['user']),
@@ -50,4 +588,15 @@ export default {
   width: 100%;
   height: 100vh;
 }
+.search-box {
+  position: absolute;
+  top: 25px;
+  right: 20px;
+}
+.menus {
+  position: absolute;
+  top: 25px;
+  left: 20px;
+  z-index: 200;
+}
 </style>