/deep/.BMap_pop img,
/deep/.BMap_top,
/deep/.BMap_center,
/deep/.BMap_bottom,
/deep/.BMap_pop > div {
&:not(:nth-child(9)) {
display: none;
}
}
/deep/.BMap_pop div:nth-child(9) {
top: 30px !important;
}
/deep/.BMap_bubble_content {
border-top: 3px solid #377abd;
border-bottom: 3px solid #377abd;
border-radius: 8px;
background-color: rgba(36, 105, 137, 0.8);
overflow: hidden;
color: #ffffff;
padding: 8px 5px;
font-size: 14;
}
例如(拿走不谢):写的我心态都崩了
<template>
<!-- :scroll-wheel-zoom="true" 开启滚轮缩放 -->
<!-- :center="{ lng: 116.404, lat: 39.915 }" 设置中心点经纬度 -->
<!-- :zoom="15" 缩放等级 -->
<!-- mapType="BMAP_SATELLITE_MAP" 地图类型 例如卫星图 -->
<!-- :mapStyle="mapStyle" 地图背景 -->
<div class="map">
<baidu-map
class="baiDuMap"
:center="location"
:zoom="zoom"
style="height: 500px; width: 100%"
:scroll-wheel-zoom="true"
@ready="mapReady"
>
<!-- bm-marker 就是标注点 定位在point的经纬度上 跳动的动画 -->
<bm-marker :position="center" @click="checkDetail"> </bm-marker>
<!-- 信息框 -->
<bm-info-window
class="info"
:title="showTitle"
:show="showFlag"
:position="center"
>
<div class="window">
<div class="container">
<div>119案件编号:dsajvgewjp9272</div>
<div>警情类型:火灾扑救/建筑堆场类</div>
<div>报警时间:2020年7月20日 15:35:20</div>
<div>警情地址:四季青镇京泉欣院小区19号</div>
</div>
<div class="input">
<span>经度:</span
><el-input v-model="center.lng" placeholder="请输入内容"></el-input>
<span>纬度:</span
><el-input v-model="center.lat" placeholder="请输入内容"></el-input>
</div>
</div>
</bm-info-window>
<!-- 页面打点显示 -->
<bm-point-collection
:points="points"
shape="BMAP_POINT_SHAPE_STAR"
color="red"
size="BMAP_POINT_SIZE_BIG"
@click="clickHandler"
>
</bm-point-collection>
</baidu-map>
<div id="chart"></div>
</div>
</template>
<script>
import * as echarts from 'echarts'
export default {
data() {
return {
location: { lng: 116.403963, lat: 39.915119 },
zoom: 19,
center: {
lng: 116.403963,
lat: 39.915119,
},
position: {
lng: 116.403963,
lat: 39.915119,
},
showTitle: '',
showFlag: false,
mapStyle: {
},
//添加大量点
points: [],
}
},
methods: {
checkDetail() {
this.showFlag = false
this.showFlag = !this.showFlag
},
clickHandler(e) {
console.log(e)
this.showFlag = false
this.center.lng = e.point.lng
this.center.lat = e.point.lat
this.showFlag = true
// alert(`单击点的坐标为:${e.point.lng}, ${e.point.lat}`)
},
//添加海量点
addPoints() {
const points = []
for (var i = 0; i < 10000; i++) {
const position = {
lng: Math.random() * 50 + 115,
lat: Math.random() * 50 + 38,
}
points.push(position)
}
this.points = points
},
//渲染地图样式
mapReady({ BMap, map }) {
console.log(BMap, map)
map.setMapStyle(
// {styleId:'8eb40484b1d9eb19b5198b599018ebb4'}
{ style: 'midnight' }
)
},
inited() {
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('chart'))
var option = {
tooltip: {
trigger: 'item',
},
series: [
{
name: 'Access From',
type: 'pie',
radius: ['40%', '70%'],
avoidLabelOverlap: false,
itemStyle: {
borderRadius: 10,
borderColor: '#fff',
borderWidth: 2,
},
label: {
show: false,
position: 'center',
},
emphasis: {
label: {
show: true,
fontSize: '40',
fontWeight: 'bold',
},
},
labelLine: {
show: false,
},
data: [
{ value: 1048, name: 'Search Engine' },
{ value: 735, name: 'Direct' },
{ value: 580, name: 'Email' },
{ value: 484, name: 'Union Ads' },
{ value: 300, name: 'Video Ads' },
],
},
],
}
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option)
window.addEventListener('resize', function () {
myChart.resize()
})
},
},
mounted() {
this.inited()
this.addPoints()
},
}
</script>
<style lang="less" scoped>
.map {
#chart {
// position: relative;
height: 200px;
width: 200px;
// z-index: 999;
}
.baiDuMap {
// position: relative;
// z-index:1;
.window {
margin: 10px 10px;
.container {
color: skyblue;
font-size: 14px;
font-weight: 700;
}
.input {
display: flex;
width: 300px;
/deep/.el-input {
.el-input__inner {
height: 20px;
line-height: 20px;
width: 95%;
color: skyblue;
font-weight: 500;
background-color: rgba(198, 233, 247);
}
}
span {
width: 100px;
color: skyblue;
font-weight: 700;
font-size: 14px;
height: 20px;
line-height: 20px;
}
}
}
//信息窗口样式
/deep/.BMap_pop img,
/deep/.BMap_top,
/deep/.BMap_center,
/deep/.BMap_bottom,
/deep/.BMap_pop > div {
&:not(:nth-child(9)) {
display: none;
}
}
/deep/.BMap_pop div:nth-child(9) {
top: 30px !important;
}
/deep/.BMap_bubble_content {
// border-top: 3px solid #377abd;
border-top: 3px solid rgba(44, 55, 47, 0.3);
// border-bottom: 3px solid #377abd;
border-bottom: 3px solid rgba(44, 55, 47, 0.3);
border-radius: 8px;
// background-color: rgba(36, 105, 137, 0.8);
background-color: rgba(44, 55, 47, 0.4);
overflow: hidden;
color: #ffffff;
padding: 8px 5px;
font-size: 14;
}
}
}
</style>