Browse Source

百度地图控件

lipengtao 6 years ago
parent
commit
aa901763b0

+ 1 - 0
package.json

@ -21,6 +21,7 @@
21 21
    "normalize.css": "7.0.0",
22 22
    "nprogress": "0.2.0",
23 23
    "vue": "2.5.10",
24
    "vue-baidu-map": "^0.21.19",
24 25
    "vue-router": "3.0.1",
25 26
    "vuex": "3.0.1"
26 27
  },

+ 4 - 0
src/main.js

@ -14,7 +14,11 @@ import store from './store'
14 14
15 15
import '@/icons' // icon
16 16
import '@/permission' // permission control
17
import BaiduMap from 'vue-baidu-map'
17 18
19
Vue.use(BaiduMap, {
20
  ak: 'tP0IZMYCV0yNFjiZ8HD64k8jIuA2lUxK'
21
})
18 22
Vue.use(ElementUI)
19 23
20 24
Vue.config.productionTip = false

+ 1 - 1
src/permission.js

@ -10,7 +10,7 @@ const whiteList = ['/login', '/home'] // 不重定向白名单
10 10
router.beforeEach((to, from, next) => {
11 11
  NProgress.start()
12 12
  if (getCookiesName()) {
13
    if (to.path === '/login') {
13
    if (to.path === '/login' || to.path === '/home') {
14 14
      next({ path: '/loginedHome' })
15 15
      NProgress.done()
16 16
    } else {

+ 41 - 6
src/views/baseInfoManage/bridgesInfo/index.vue

@ -80,14 +80,17 @@
80 80
                  </el-select>
81 81
                </el-form-item>
82 82
              </el-col>
83
              <el-col :span="24">
84
                <el-form-item label="站点位置" prop="addrCode">
85
                  <CityPicker @paren="toshow" :addrCode='ruleForm2.addrCode'></CityPicker>
86
                </el-form-item>
87
              </el-col>
88 83
              <el-col :span="24">
89 84
                <el-form-item label="地理位置信息" prop="location">
90
                  <el-input placeholder="请输入地理位置信息" v-model="ruleForm2.location" maxlength=200></el-input>
85
                  <baidu-map class="map" center="中国" :zoom="4" :scroll-wheel-zoom="true" @click="getpoint" @ready="handler">
86
                    <bm-city-list anchor="BMAP_ANCHOR_TOP_LEFT"></bm-city-list>
87
                    <bm-marker :position="markerPoint" :dragging="true" @dragend="getpoint">
88
                    </bm-marker>
89
                    <bm-info-window :position="infoWindow.position" title="站点位置" :show="infoWindow.show" @close="infoWindowClose"
90
                      @open="infoWindowOpen">
91
                      <p v-text="infoWindow.contents"></p>
92
                    </bm-info-window>
93
                  </baidu-map>
91 94
                </el-form-item>
92 95
              </el-col>
93 96
              <el-col :span="24">
@ -195,6 +198,13 @@
195 198
        }
196 199
      }
197 200
      return {
201
        infoWindow: {
202
          show: true,
203
          contents: '11',
204
          position: {}
205
        },
206
        markerPoint: {},
207
        bmap: '',
198 208
        systemList: [{ label: '公开', value: 1 }, { label: '未公开', value: 0 }],
199 209
        citys: {},
200 210
        edit: '',
@ -263,6 +273,26 @@
263 273
      CityPicker
264 274
    },
265 275
    methods: {
276
      handler({ BMap, map }) {
277
        this.bmap = new BMap.Geocoder()
278
      },
279
      getpoint(e) {
280
        this.markerPoint = e.point
281
        this.bmap.getLocation(this.markerPoint, rs => {
282
          this.infoWindow = {
283
            show: true,
284
            position: rs.point,
285
            contents: rs.address
286
          }
287
          console.log(rs)
288
        })
289
      },
290
      infoWindowClose(e) {
291
        this.infoWindow.show = false
292
      },
293
      infoWindowOpen(e) {
294
        this.infoWindow.show = true
295
      },
266 296
      getDictoryData() {
267 297
        queryDict.applyDict('XZQH', dictData => {
268 298
          dictData.map(item => {
@ -447,6 +477,11 @@
447 477
</script>
448 478
449 479
<style rel="stylesheet/scss" lang="scss" scoped>
480
  .map {
481
    width: 100%;
482
    height: 200px;
483
  }
484
450 485
  .el-autocomplete {
451 486
    display: block
452 487
  }

+ 1 - 1
src/views/home/loginedHome.vue

@ -74,6 +74,6 @@
74 74
  }
75 75
76 76
  .v-modal {
77
    z-index: 0 !important;
77
    z-index: 2 !important;
78 78
  }
79 79
</style>

+ 60 - 1
src/views/home/unloginHome.vue

@ -1,5 +1,64 @@
1 1
<template>
2 2
  <div>
3 3
    未登录首页
4
    <baidu-map class="map" center="中国" :zoom="4" :scroll-wheel-zoom="true">
5
      <bm-city-list anchor="BMAP_ANCHOR_TOP_LEFT"></bm-city-list>
6
      <bm-point-collection :points="points" shape="BMAP_POINT_SHAPE_WATERDROP" color="red" size="BMAP_POINT_SIZE_SMALL"
7
        @click="clickHandler">
8
      </bm-point-collection>
9
      <bm-info-window :position="infoWindow.position" title="Info Window Title" :show="infoWindow.show" @close="infoWindowClose"
10
        @open="infoWindowOpen">
11
        <p v-text="infoWindow.contents"></p>
12
      </bm-info-window>
13
    </baidu-map>
4 14
  </div>
5
</template>
15
</template>
16
17
<script>
18
  export default {
19
    data() {
20
      return {
21
        points: [],
22
        infoWindow: {
23
          show: true,
24
          contents: '11',
25
          position: {}
26
        }
27
      }
28
    },
29
    created() {
30
      this.addPoints()
31
      this.infoWindow.position = this.points[0]
32
    },
33
    methods: {
34
      clickHandler(e) {
35
        this.infoWindow = {
36
          show: true,
37
          position: { lng: e.point.lng, lat: e.point.lat },
38
          contents: e.point.lat
39
        }
40
      },
41
      addPoints() {
42
        const points = []
43
        for (var i = 0; i < 50; i++) {
44
          const position = { lng: Math.random() * 40 + 85, lat: Math.random() * 30 + 21 }
45
          points.push(position)
46
        }
47
        this.points = points
48
      },
49
      infoWindowClose(e) {
50
        this.infoWindow.show = false
51
      },
52
      infoWindowOpen(e) {
53
        this.infoWindow.show = true
54
      }
55
    }
56
  }
57
</script>
58
<style>
59
  .map {
60
    width: 450px;
61
    height: 450px;
62
    margin-left: 40px;
63
  }
64
</style>