目录
最终效果
完整代码
需安装依赖 "element-ui": "^2.4.5", "vue-baidu-map": "^0.21.22", "axios": "^0.19.2",
<template>
<div style="position: relative">
<el-autocomplete
class="searchBar"
size="small"
v-model="placeName"
:fetch-suggestions="querySearchAsync"
placeholder="请输入目标地点的关键字"
@select="choose"
>
<i class="el-icon-search el-input__icon" slot="suffix"></i>
</el-autocomplete>
<baidu-map
v-loading="loading"
element-loading-spinner="el-icon-loading"
element-loading-background="rgba(0, 0, 0, 0.8)"
@ready="initMap"
:min-zoom="minZoom"
:zoom="zoom"
:center="mapCenter"
@zoomend="updateZoom"
:mapStyle="mapStyle"
style="height: 100vh;width: 100%"
:scroll-wheel-zoom="true">
</baidu-map>
</div>
</template>
<script>
// 缩放比例范围 5-18
// 5-8 省覆盖物
// 8-11 市覆盖物
// 11-15 区覆盖物
// 15-18 无覆盖物
export default {
watch: {
zoom(newZoom) {
this.draw(newZoom)
}
},
methods: {
choose(item) {
this.addMarker(item.location)
},
// 添加标注——跳动的点
addMarker(pointInfo) {
this.map.clearOverlays();
let point = new BMap.Point(pointInfo.lng, pointInfo.lat);
let marker = new BMap.Marker(point); // 创建标注
this.mapCenter = point
this.zoom = 18
this.map.addOverlay(marker); // 将标注添加到地图中
marker.setAnimation(BMAP_ANIMATION_BOUNCE); // 设置跳动的动画
},
// 搜索
querySearchAsync(queryString, cb) {
this.$http.get("/baiduMapAPI/place/v2/search", {
params: {
query: queryString,
region: this.city.name,
output: 'json',
city_limit: true,
ak: this.GLOBAL.baiduMapAK
}
}).then(res => {
let list = res.data.results.map(item => {
return {
value: item.name,
...item
}
})
cb(list);
})
},
initMap({BMap, map}) {
this.map = map
this.draw(this.zoom)
},
// 绘制覆盖物
draw(newZoom) {
if (5 <= newZoom && newZoom < 8) {
this.map.clearOverlays();
this.drawProvince()
} else if (8 <= newZoom && newZoom < 11) {
this.map.clearOverlays();
this.drawCityList()
} else if (11 <= newZoom && newZoom <= 15) {
this.map.clearOverlays();
this.drawRegionList()
}
},
// 绘制省覆盖物
drawProvince() {
this.addRegionLabel(this.city.name, this.province.name)
this.drawPolygon(this.province.name)
let that = this
setTimeout(function () {
that.loading = false
}, 500);
},
// 绘制市覆盖物
drawCityList() {
this.cityList.forEach(region => {
this.addRegionLabel(region.name, region.name)
this.drawPolygon(region.name)
})
let that = this
setTimeout(function () {
that.loading = false
}, 500);
},
// 绘制区覆盖物
drawRegionList() {
this.regionList.forEach(region => {
this.addRegionLabel(this.city.name, region.name)
this.drawPolygon(region.name)
})
let that = this
setTimeout(function () {
that.loading = false
}, 500);
},
updateZoom(e) {
this.zoom = e.target.getZoom()
},
// 获取行政区划的坐标
getReigonLocation(city, region) {
return this.$http.get("/baiduMapAPI/place/v2/search", {
params: {
query: region,
region: city,
output: 'json',
city_limit: true,
ak: this.GLOBAL.baiduMapAK
}
}).then(res => {
let location = res.data.results[0].location
return Promise.resolve(location);
})
},
// 添加行政区划文本标注
async addRegionLabel(city, region) {
let point = await this.getReigonLocation(city, region)
// 创建文本标注对象
let label = new BMap.Label(region,
{
position: new BMap.Point(point.lng, point.lat),
offset: new BMap.Size(-10, -40) //设置文本偏移量
}
);
label.setStyle({
color: "white",
fontSize: "16px",
fontFamily: "微软雅黑",
background: "none",
border: "none",
fontWeight: 'bold'
});
// 在地图上添加文本标注对象
this.map.addOverlay(label);
},
// 绘制行政区划轮廓
drawPolygon(regionName) {
if (regionName === '龙华区') {
regionName = this.city.name + regionName
}
let that = this
let bdary = new BMap.Boundary();
bdary.get(regionName, function (rs) {
//轮廓的总数
let count = rs.boundaries.length;
if (!count) {
console.log('未能获取到当前输入的行政区域');
return;
}
for (let i = 0; i < count; i++) {
//创建多边形覆盖物
let ply = new BMap.Polygon(rs.boundaries[i],
{
strokeWeight: 1,
strokeColor: "white",
fillOpacity: 0.05,
strokeStyle: "dashed",
}
);
if (that.activeRegion === regionName) {
ply.setFillOpacity(0.3)
}
// 添加点击事件
ply.addEventListener('click', function () {
that.loading = true
that.map.clearOverlays();
that.activeRegion = regionName
that.draw(that.zoom)
// 改变自己的透明度
// this.setFillOpacity(0.6)
});
//添加覆盖物
that.map.addOverlay(ply);
}
})
},
},
data() {
return {
placeName: '',
// 行政区划信息
activeRegion: '',
provice: {
name: '',
regionCode: ''
},
city: {
name: '深圳市',
regionCode: ''
},
cityList: [],
regionList: [],
// 地图初始化信息
loading: false,
map: null,
mapCenter: '深圳市',
minZoom: 5,
zoom: 10,
mapStyle: {
// 百度地图主题编辑器
// https://developer.baidu.com/map/custom/
styleJson:
[
{
"featureType": "all",
"elementType": "labels.text.fill",
"stylers": {
"color": "#57afacff"
}
},
{
"featureType": "all",
"elementType": "geometry.fill",
"stylers": {
"color": "#1a3547ff"
}
},
{
"featureType": "road",
"elementType": "all",
"stylers": {
"color": "#15223bff"
}
},
{
"featureType": "all",
"elementType": "labels.text.stroke",
"stylers": {
"color": "#e9eeed00"
}
},
{
"featureType": "land",
"elementType": "all",
"stylers": {
"color": "#101b2eff"
}
},
{
"featureType": "building",
"elementType": "geometry",
"stylers": {
"color": "#273d64ff"
}
},
{
"featureType": "water",
"elementType": "all",
"stylers": {
"color": "#185790ff"
}
}
]
}
}
},
mounted() {
this.cityList = [
{
name: '深圳市',
regionCode: ''
},
]
this.regionList = [
{
name: '福田区',
regionCode: ''
},
{
name: '罗湖区',
regionCode: ''
},
{
name: '南山区',
regionCode: ''
},
{
name: '盐田区',
regionCode: ''
},
{
name: '龙岗区',
regionCode: ''
},
{
name: '坪山区',
regionCode: ''
},
{
name: '光明区',
regionCode: ''
},
{
name: '龙华区',
regionCode: ''
},
{
name: '宝安区',
regionCode: ''
},
]
}
}
</script>
<style scoped>
/* 隐藏百度图片Logo */
/deep/ .BMap_cpyCtrl {
display: none;
}
/* 隐藏文字信息 */
/deep/ .anchorBL {
display: none;
}
.searchBar {
position: absolute;
top: 30px;
right: 80px;
z-index: 9999;
}
/deep/ .el-input__inner {
background-color: #101b2e;
border: 1px solid #1f60a9;
color: white;
}
</style>接口配置
vue.config.js 的 proxy 中
// 【范例】访问百度地图的API
// vue文件中使用方法 this.$http.get("/baiduMapAPI/place/v2/search"
// 最终实际访问的接口为 http://api.map.baidu.com/place/v2/search
// 遇到以/baiduMapAPI开头的接口便使用此代理
'/baiduMapAPI': {
// 实际访问的服务器地址
target: 'http://api.map.baidu.com',
//开启代理：在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，这样客户端和服务端进行数据的交互就不会有跨域问题
changOrigin: true,
ws: true, // 是否启用websockets
secure: false, // 使用的是http协议则设置为false，https协议则设置为true
// 将接口中的/baiduMapAPI去掉（必要）
pathRewrite: {
'^/baiduMapAPI': ''
}
},