百度地图控件

package.json

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

src/main.js

@@ -14,7 +14,11 @@ import store from './store'
import '@/icons' // icon
import '@/permission' // permission control
import BaiduMap from 'vue-baidu-map'
Vue.use(BaiduMap, {
  ak: 'tP0IZMYCV0yNFjiZ8HD64k8jIuA2lUxK'
})
Vue.use(ElementUI)
Vue.config.productionTip = false

src/permission.js

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

src/views/baseInfoManage/bridgesInfo/index.vue

@@ -80,14 +80,17 @@
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="站点位置" prop="addrCode">
                  <CityPicker @paren="toshow" :addrCode='ruleForm2.addrCode'></CityPicker>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="地理位置信息" prop="location">
                  <el-input placeholder="请输入地理位置信息" v-model="ruleForm2.location" maxlength=200></el-input>
                  <baidu-map class="map" center="中国" :zoom="4" :scroll-wheel-zoom="true" @click="getpoint" @ready="handler">
                    <bm-city-list anchor="BMAP_ANCHOR_TOP_LEFT"></bm-city-list>
                    <bm-marker :position="markerPoint" :dragging="true" @dragend="getpoint">
                    </bm-marker>
                    <bm-info-window :position="infoWindow.position" title="站点位置" :show="infoWindow.show" @close="infoWindowClose"
                      @open="infoWindowOpen">
                      <p v-text="infoWindow.contents"></p>
                    </bm-info-window>
                  </baidu-map>
                </el-form-item>
              </el-col>
              <el-col :span="24">
@@ -195,6 +198,13 @@
        }
      }
      return {
        infoWindow: {
          show: true,
          contents: '11',
          position: {}
        },
        markerPoint: {},
        bmap: '',
        systemList: [{ label: '公开', value: 1 }, { label: '未公开', value: 0 }],
        citys: {},
        edit: '',
@@ -263,6 +273,26 @@
      CityPicker
    },
    methods: {
      handler({ BMap, map }) {
        this.bmap = new BMap.Geocoder()
      },
      getpoint(e) {
        this.markerPoint = e.point
        this.bmap.getLocation(this.markerPoint, rs => {
          this.infoWindow = {
            show: true,
            position: rs.point,
            contents: rs.address
          }
          console.log(rs)
        })
      },
      infoWindowClose(e) {
        this.infoWindow.show = false
      },
      infoWindowOpen(e) {
        this.infoWindow.show = true
      },
      getDictoryData() {
        queryDict.applyDict('XZQH', dictData => {
          dictData.map(item => {
@@ -447,6 +477,11 @@
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  .map {
    width: 100%;
    height: 200px;
  }
  .el-autocomplete {
    display: block
  }

src/views/home/loginedHome.vue

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

src/views/home/unloginHome.vue

@@ -1,5 +1,64 @@
<template>
  <div>
    未登录首页
    <baidu-map class="map" center="中国" :zoom="4" :scroll-wheel-zoom="true">
      <bm-city-list anchor="BMAP_ANCHOR_TOP_LEFT"></bm-city-list>
      <bm-point-collection :points="points" shape="BMAP_POINT_SHAPE_WATERDROP" color="red" size="BMAP_POINT_SIZE_SMALL"
        @click="clickHandler">
      </bm-point-collection>
      <bm-info-window :position="infoWindow.position" title="Info Window Title" :show="infoWindow.show" @close="infoWindowClose"
        @open="infoWindowOpen">
        <p v-text="infoWindow.contents"></p>
      </bm-info-window>
    </baidu-map>
  </div>
</template>
</template>
<script>
  export default {
    data() {
      return {
        points: [],
        infoWindow: {
          show: true,
          contents: '11',
          position: {}
        }
      }
    },
    created() {
      this.addPoints()
      this.infoWindow.position = this.points[0]
    },
    methods: {
      clickHandler(e) {
        this.infoWindow = {
          show: true,
          position: { lng: e.point.lng, lat: e.point.lat },
          contents: e.point.lat
        }
      },
      addPoints() {
        const points = []
        for (var i = 0; i < 50; i++) {
          const position = { lng: Math.random() * 40 + 85, lat: Math.random() * 30 + 21 }
          points.push(position)
        }
        this.points = points
      },
      infoWindowClose(e) {
        this.infoWindow.show = false
      },
      infoWindowOpen(e) {
        this.infoWindow.show = true
      }
    }
  }
</script>
<style>
  .map {
    width: 450px;
    height: 450px;
    margin-left: 40px;
  }
</style>