|
|
@@ -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>
|
