🧠 文章知识库

Appearance

Return to top
目录

使用百度地图设置中心点

  • 根据行政区划选择器选择的区划设置百度地图的中心点

  • 该方法使用了vue-baidu-map 和 百度地图API（可根据业务只使用其中的一个）

步骤一

  • 申请百度地图密钥

步骤二

  • 在index.html中添加百度地图JavaScript API接口
html
<!-- public/index.html -->
<head>
    <script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=a2**************************&s=1"></script>
</head>

步骤三

  • 在vue.config.jd配置文件中配置BMap
javascript
module.exports = {
    configureWebpack: {
        externals: {
            'BMap': 'BMap'
        },
    }
}

步骤四

  • 安装vue-baidu-map
shell
$ npm install vue-baidu-map --save

步骤五

  • 全局注册
javascript
// main.js
import BaiduMap from 'vue-baidu-map'
Vue.use(BaiduMap, {
  ak: 'ab****************er'
})

步骤六

  • 根据行政区划名设置地图中心点以及缩放（公共方法）
javascript
// src/mixins/mapCenter.js

import BMap from 'BMap'

export default {
  data() {
    return {
      map: '',
      BMap: '',
      form: {
        region: ''
      }
    }
  },

  methods: {
    ready({
      BMap,
      map
    }) {
      this.BMap = BMap
      this.map = map
      // 中心点（根据业务设置）
      const point = new BMap.Point(102.815316, 24.898192)
      // 最大可以设置绽放级别为15
      let zoom = 8
      const level = this.level
      zoom = level === 1 ? 8 : level === 2 ? 9 : 11
      map.centerAndZoom(point, zoom)
    },

    // 设置省市边界
    setBoundary() {
      if (!this.form.region?.fullName) return
      var bdary = new BMap.Boundary()
      var that = this
      bdary.get(that.form.region?.fullName, function(rs) {
        // 获取行政区域
        that.map.clearOverlays() // 清除地图覆盖物
        var count = rs.boundaries.length // 行政区域的点有多少个
        if (count === 0) {
          return
        }
        var pointArray = []
        for (var i = 0; i < count; i++) {
          var ply = new BMap.Polygon(rs.boundaries[i], {
            strokeWeight: 3,
            strokeColor: 'rgb(255,50,0)',
            fillOpacity: 0.2
          }) // 建立多边形覆盖物
          that.map.addOverlay(ply) // 添加覆盖物
          pointArray = pointArray.concat(ply.getPath())
        }
        that.map.setViewport(pointArray) // 调整视野
        let zoom = 8
        zoom = that.form.region.level === 1 ? 8 : that.form.region.level === 2 ? 9 : 11
        that.map.setZoom(zoom)
      })
    }
  }
}

步骤七

  • 使用vue-baidu-map
html
<baidu-map
    v-loading="markWindowLoading"
    element-loading-text="加载中"
    element-loading-background="rgba(0, 0, 0, 0.5)"
    class="map"
    :scroll-wheel-zoom="true"
    :min-zoom="7"
    map-type="BMAP_HYBRID_MAP"
    @ready="ready"
></baidu-map
javascript
<script>
    import mapMixin from '@/mixins/mapCenter.js'
    
    export default {
      mixins: [mapMixin],
    }

    methods: {
        // 在区划改变时或查询时调用设置边界方法
        changeRegion() {
            this.this.setBoundary()
        }
    }
</script>