1.使用百度地图首先得申请他的ak去 地址：登录百度帐号 记得选择浏览器端
2.下面咱们开始代码方面，首先在index.html中引入百度api
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>baidu-map</title>
<script type="text/javascript" src="http://api.map.baidu.com/api?type=webgl&v=1.0&ak=你的密钥"></script>
<!-- 去掉百度地图logo -->
<style type="text/css">.BMap_cpyCtrl {display: none;}</style>
<style type="text/css">.anchorBL{display:none;}</style>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
3.然后开始在页面中实例地图 具体代码中注释很详细 有问题评论区提问哈
<template>
<div class="bai-du-map">
<div id="map" />
<div class="item-city">
<el-select v-model="value" filterable placeholder="请选择城市" @change="cityChange">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</div>
<div class="on-off">
<el-switch
v-model="switchVal"
style="color:#fff;"
inactive-text="开启3d画面"
active-color="#13ce66"
inactive-color="#CDCFD0"
@change="switchChange"/>
<el-button type="danger" round size="mini" @click="removeDrawing">清空图层</el-button>
</div>
</div>
</template>
<script>
export default {
name: 'Baidumap',
data() {
return {
map: null, // 实例地图
polygon: null, // 实例画面
mapStyle: [], // 地图样式 这里的样式让我删了太长了 自行下载去吧https://lbsyun.baidu.com/customv2/help.html
options: [], // 城市列表
value: '', // 选中的城市id
switchVal: false, // 是否开启3d画面
cityName: '', // 选中城市名称
marker: null// 打点实例
}
},
mounted() {
this.mapBox()
this.cityList()
},
methods: {
/**
* @description:初始化百度地图
* @param {*}
* @return {*}
*/
mapBox() {
// eslint-disable-next-line no-undef
this.map = new BMapGL.Map('map') // 创建Map实例
// eslint-disable-next-line no-undef
this.map.centerAndZoom(new BMapGL.Point(116.28019, 40.049191), 8) // 初始化地图,设置中心点坐标和地图级别
this.map.enableScrollWheelZoom(true) // 开启鼠标滚轮缩放
this.map.setHeading(0) // 视觉方向
this.map.setTilt(55) // 视觉角度
this.map.setMapStyleV2({ styleJson: this.mapStyle }) // 地图样式
},
/**
* @description: 清除图层按钮
* @param {*}
* @return {*}
*/
removeDrawing() {
this.value = ''
this.map.clearOverlays()// 清除图层
},
/**
* @description:开关的回调函数 开关选择监听判断2d和3d
* @param {*} d 布尔值
* @return {*}
*/
switchChange(d) {
if (d) {
this.drawSurface3D(this.cityName)
} else {
this.drawSurface2D(this.cityName)
}
},
/**
* @description:选框选择城市地图变化
* @param {*}
* @return {*}
*/
cityChange(val) {
if (val) {
let obj = {}
obj = this.options.find(item => {
return item.value === val // 筛选出匹配数据
})
this.cityName = obj.label
if (this.switchVal) {
this.drawSurface3D(obj.label)
} else {
this.drawSurface2D(obj.label)
}
} else {
this.drawSurface2D('中国')
}
},
/**
* @description: 城市列表请求
* @param {*}
* @return {*}
*/
cityList() {
this.$http.getFun('../../../static/config/json/cityname.json').then((res) => {
if (res.status === 200) {
this.options = res.data
} else {
this.$message({
showClose: true,
message: res.statusText,
type: 'error'
})
}
})
},
/**
* @description: 2d画区图
* @param {*} val 传入城市的名称 也可以是具体某个区
* @return {*}
*/
drawSurface2D(val) {
// 判断val是否有值 空不执行方法
if (val === '') {
return
} else {
this.map.clearOverlays()// 清除图层不然图层会叠加
// eslint-disable-next-line no-undef
var bd = new BMapGL.Boundary()
bd.get(val, (res) => {
// eslint-disable-next-line no-undef
var hole = new BMapGL.Polygon(res.boundaries, {
strokeColor: '#02b5ec',
strokeWeight: 2,
strokeOpacity: 0.5,
fillColor: '#0058c6',
fillOpacity: 0.7
})
this.map.addOverlay(hole)
})
// 下面是加载自己画的json
// this.map.clearOverlays()// 清楚图层不然图层会叠加
// // eslint-disable-next-line no-undef
// this.$http.getFun(`../../../static/config/json/${val}.json`).then((res) => {
// const features = res.features
// features.forEach((feature) => {
// var coords = feature.geometry.coordinates
// for (let i = 0; i < coords.length; i++) {
// for (let j = 0; j < coords[i].length; j++) {
// var pointArr = []
// for (let k = 0; k < coords[i][j].length; k++) {
// var xy = coords[i][j][k]
// // eslint-disable-next-line no-undef
// pointArr.push(new BMapGL.Point(xy[0], xy[1]))
// }
// // eslint-disable-next-line no-undef
// this.polygon = new BMapGL.Polygon(pointArr, {
// strokeColor: '#02b5ec',
// strokeWeight: 2,
// strokeOpacity: 0.5,
// fillColor: '#0058c6',
// fillOpacity: 0.7
// })
// this.map.addOverlay(this.polygon)
// }
// }
// })
// })
}
},
/**
* @description: 3d画区图
* @param {*} val 传入城市的名称
* @return {*}
*/
drawSurface3D(val) {
if (val === '') {
return
} else {
this.map.clearOverlays()// 清除图层不然图层会叠加
// eslint-disable-next-line no-undef
var dq = new BMapGL.Boundary()
dq.get(val, (rs) => {
var count = rs.boundaries.length // 行政区域的点有多少个
for (var i = 0; i < count; i++) {
var path = []
const str = rs.boundaries[i].replace(' ', '')
const points = str.split(';')
for (var j = 0; j < points.length; j++) {
var lng = points[j].split(',')[0]
var lat = points[j].split(',')[1]
// eslint-disable-next-line no-undef
path.push(new BMapGL.Point(lng, lat))
}
// eslint-disable-next-line no-undef
var prism = new BMapGL.Prism(path, 6000, {
topFillColor: '#02b5ec',
topFillOpacity: 0.5,
sideFillColor: '#0058c6',
sideFillOpacity: 0.9
})
this.map.addOverlay(prism)
}
})
}
}
}
}
</script>
<style lang="scss" scoped>
.bai-du-map {
position:relative;
overflow: hidden;
#map {
@include computed_W(1920);
@include computed_H(1080);
}
.item-city {
z-index: 999;
position:absolute;
top:50px;
left: 50px;
}
.on-off {
z-index: 999;
position:absolute;
top:20px;
left: 50px;
/deep/ .el-switch__label--left{
color: #fff;
}
}
}
</style>
具体也也可以自行去看百度的api文档也比较具体 jspopularGL | 百度地图API SDK，
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
