使用百度地图设置中心点
根据行政区划选择器选择的区划设置百度地图的中心点
该方法使用了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>