数据可视化大屏项目中经常会使用到百度地图，今天我们实现在vue项目使用使用百度地图。
在以前的数据大屏中，我们使用的是vue2 使用百度地图插件vue-baidu-map和vue3 vite项目使用百度地图插件在vue2和vue3项目中我们都是使用的封装的vue插件来实现我们想要的效果，今天我们不使用封装插件直接使用百度地图js来实现我们想要的效果。
文档地址
获取百度地图key
在使用前，您需先申请密钥（ak）才可使用
申请密钥（ak）
引入js
vue2项目引入js
public/index.html引入百度js
<script src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=yourak"></script>
初始化
<template>
<div class="bdMap">
<div class="container" ref="mapContainer" id="container"></div>
</div>
</template>
<script>
export default {
name: 'BaiduMap',
data() {
return {
map: null
};
},
mounted() {
const checkBMap = setInterval(() => {
if (typeof BMapGL !== 'undefined') {
this.initMap();
clearInterval(checkBMap);
} else {
console.log('BMapGL is undefined')
}
}, 100);
},
methods: {
initMap() {
var map = new BMapGL.Map("container"); // 创建地图实例
var point = new BMapGL.Point(116.404, 39.915); // 创建点坐标
map.centerAndZoom(point, 15); // 初始化地图，设置中心点坐标和地图级别
}
}
};
</script>
<style lang="scss" scoped>
.bdMap {
position: fixed;
width: 100%;
height: 100%;
z-index: 0;
.container {
position: relative;
width: 100%;
height: 100%;
z-index: 10;
}
}
</style>
百度地图自定义动态标注图标
动态效果
演示地址
11 vue 项目echarts地图点击切换百度地图缩放返回echarts地图
百度地图和echarts互相切换：地图默认显示的是echarts地图，点击对应的地点后，会跳转到百度地图，百度地图缩放以后，重新显示echarts地图。
演示地址
vue 项目echarts地图点击切换百度地图缩放返回echarts地图
动态效果
9.GeoJSON图层渲染
演示地址
7.百度地图设置卫星图
百度地图设置卫星图
// 创建地图实例
this.map = new BMapGL.Map('container')
// 创建点坐标
var point = new BMapGL.Point(116.404, 39.915)
// 初始化地图，设置中心点坐标和地图级别
this.map.centerAndZoom(point, 15)
// 设置地图的默认显示类型为卫星地图
this.map.setMapType(BMAP_SATELLITE_MAP);
演示地址
6.设置自定义图标弹窗
设置自定义图标，自定义图标可以点击后显示浮窗，再次点击浮窗可以显示弹窗
为了避免浮窗出现层级问题，我们将组件插入到body中。
演示地址
5.自定义浮窗样式
右下角为中心点的浮窗效果
演示地址
关键代码
CustomOverlay.prototype.draw = function() {
var map = this._map;
var pixel = map.pointToOverlayPixel(this._point);
this._div.style.left = (pixel.x - this._div.offsetWidth) + "px"; // offsetX为元素的宽度
this._div.style.top = (pixel.y - this._div.offsetHeight) + "px"; // offsetY为元素的高度
}
4.自定义覆盖物点击显示弹窗
我们添加完自定义覆盖物后，还需要通过点击弹窗显示详细信息，这需要给弹窗增加一个点击事件，点击后显示弹窗，并且可以通过点击关闭图标关闭弹窗。
演示地址
实现代码
在上面自定义覆盖物代码的基础上进行修改
// 实现初始化方法
CustomOverlay.prototype.initialize = function (map) {
this._map = map
var div = document.createElement('div')
div.innerHTML = this._html
div.style.position = 'absolute'
var oldPeopleHome = div.querySelector('.oldPeopleHome')
oldPeopleHome.addEventListener('click', function () {
var map4PopInfo = div.querySelector('.map4PopInfo')
map4PopInfo.style.display = 'block'
})
var closeBtn = div.querySelector('.close')
closeBtn.addEventListener('click', function (event) {
console.log('Close button clicked!') // 在控制台输出，方便调试
var map4PopInfo = div.querySelector('.map4PopInfo')
map4PopInfo.style.display = 'none'
event.stopPropagation() // 阻止事件冒泡
})
map.getPanes().labelPane.appendChild(div)
this._div = div
return div
}
数组渲染
// 添加覆盖物
const overlaysData = [
{
lng: 116.404,
lat: 39.915,
name: '养老院名称1',
num: 50,
phone: '0531-66668888'
},
{
lng: 116.414,
lat: 39.925,
name: '养老院名称2',
num: 50,
phone: '0531-66668888'
}
]
// 批量添加覆盖物
overlaysData.forEach(data => {
var html = `<div class='oldPeopleHome'>
<div class="map4PopInfo">
<div class="popHead">
<div class="popIcon"></div>
<span>${data.name}</span>
</div>
<div class="popBody">
<div class="popBodyItem">
<div class="popBodyItemName">
<span>当前入住人数</span>
</div>
<div class="popBodyItemDesc">
<span>${data.num}人</span>
</div>
</div>
<div class="popBodyItem">
<div class="popBodyItemName">
<span>机构电话</span>
</div>
<div class="popBodyItemDesc">
<span>${data.phone}</span>
</div>
</div>
</div>
<div class="line"></div>
<div class="close"></div>
</div>
</div>`
let point = new BMapGL.Point(data.lng, data.lat)
let overlay = new CustomOverlay(point, html)
this.map.addOverlay(overlay)
})
3.添加自定义覆盖物
效果图
演示地址
定义自定义覆盖物类
// 定义自定义覆盖物的构造函数
function CustomOverlay(point, html) {
this._point = point;
this._html = html;
}
// 继承API的BMapGL.Overlay
CustomOverlay.prototype = new BMapGL.Overlay();
// 实现初始化方法
CustomOverlay.prototype.initialize = function(map) {
this._map = map;
var div = document.createElement("div");
div.innerHTML = this._html;
div.style.position = "absolute";
map.getPanes().labelPane.appendChild(div);
this._div = div;
return div;
}
// 实现绘制方法
CustomOverlay.prototype.draw = function() {
var position = this._map.pointToOverlayPixel(this._point);
this._div.style.left = position.x + "px";
this._div.style.top = position.y + "px";
}
添加覆盖物
// 添加覆盖物
const overlaysData = [
{
lng: 116.404,
lat: 39.915,
html: '<div class=\'oldPeopleHome\'></div>'
},
{
lng: 116.414,
lat: 39.925,
html: '<div class=\'oldPeopleHome\'></div>'
}
]
// 批量添加覆盖物
overlaysData.forEach(data => {
let point = new BMapGL.Point(data.lng, data.lat)
let overlay = new CustomOverlay(point, data.html)
this.map.addOverlay(overlay)
})
2.允许滚轮缩放
map.enableScrollWheelZoom(true);
演示地址
1.设置自定义主题色
我们可以事先设置好主题色，百度地图修改地图主题色，然后将配置好的主题色id拿来使用。
map.setMapStyleV2({
styleId: '55a1a095168744db6bd54be6015a6547'
});
