此文章只适合新手........
我这块主要是使用标签来进行使用,没有api操作灵活,但是也覆盖了大部分场景 ,只适合新手 只适合新手
<baidu-map
style="position: absolute; height: 100%"
class="bm-view"
:scroll-wheel-zoom="true"
:center="center"
:zoom="zoom"
:min-zoom="min_zoom"
:max-zoom="max_zoom"
:map-click="false"
@ready="onBaiduMapReady"
>
// 右上角的切换按钮
<bm-control class="kongjian">
<button
ref="kj1"
style="color: #fff; background: #108ee9"
@click="geticon('kj1', !isShow.firstIsShow, 'firstIsShow')"
>
<!-- style="color: #fff; background: #108ee9" -->
数据
</button>
<button
ref="kj2"
@click="geticon('kj2', !isShow.secondIsShow, 'secondIsShow')"
>
商户
</button>
<button
ref="kj3"
@click="geticon('kj3', !isShow.thirdIsShow, 'thirdIsShow')"
>
车辆
</button>
<button
ref="kj4"
@click="geticon('kj4', !isShow.fourthIsShow, 'fourthIsShow')"
>
路线
</button>
<button
ref="kj5"
@click="geticon('kj5', !isShow.sixthIsShow, 'sixthIsShow')"
>
异常事件
</button>
</bm-control>
<!-- 行政区 -->
<!-- 行政区划分 使用这个bm-boundary name属性值为:‘西安市雁塔区’ 这种的文字就可以 -->
<bm-boundary
v-for="(item, index) in administrativeRegion"
:key="index"
:name="item.name"
:strokeWeight="3"
:strokeColor="item.color"
:fillColor="item.color"
>
</bm-boundary>
<!-- 文字层 -->
<!-- 地图上的长显示文字 -->
<bm-overlay
pane="labelPane"
:class="{ sample: true, active }"
v-for="item in areaDivideName"
:position="{ lng: item.lng, lat: item.lat }"
:key="item.lng"
@draw="draw($event, item)"
@mouseover.native="active = true"
@mouseleave.native="active = false"
>
<div>
<p>{{ item.newName }}</p>
<p>{{ item.discharge }}</p>
</div>
</bm-overlay>
<!-- 点的聚合效果 -->
<bml-marker-clusterer :averageCenter="false">
<!-- 点 -->
<bm-marker
v-for="(item, index) in shoppingNameOne"
:key="item.id + '' + index"
:position="{ lng: item.lng, lat: item.lat }"
:icon="item.path"
@click="infoWindowOpen(item)"
>
</bm-marker>
</bml-marker-clusterer>
<bm-marker
v-for="(item, index) in shoppingNameTwo"
:key="item.id + '' + index"
:position="{ lng: item.lng, lat: item.lat }"
:icon="item.path"
@click="infoWindowOpenCar(item)"
>
</bm-marker>
<bm-marker
v-for="(item, index) in shoppingNameThree"
:key="item.id + '' + index"
:position="{ lng: item.lng, lat: item.lat }"
:icon="item.path"
@click="infoWindowOpenBnormal(item)"
>
</bm-marker>
<bm-info-window
:show="!bmMmarkerShow"
:position="{ lng: infoWindowOpenObj.lng, lat: infoWindowOpenObj.lat }"
@close="infoWindowClose"
>
<p class="customerName">
<span>商户名:</span>{{ infoWindowOpenObj.customerName }}
</p>
<p class="customerName">
<span>收运状态:</span
>{{ infoWindowOpenObj.status == 0 ? "未收运" : "已收运" }}
</p>
<p class="customerName">
<span>今日收运量:</span>{{ infoWindowOpenObj.discharge }}
</p>
</bm-info-window>
<bm-info-window
:show="!bmCarShow"
:position="{ lng: infoWindowOpenCarObj.lng, lat: infoWindowOpenCarObj.lat }"
@close="infoWindowCloseCar"
>
<p class="customerName">
<span>车辆名:</span>{{ infoWindowOpenCarObj.vehicleName }}
</p>
<p class="customerName">
<span>工作状态:</span
>{{ infoWindowOpenCarObj.status == 0 ? "空闲" : "工作" }}
</p>
<p class="customerName">
<span>定位时间:</span>{{ infoWindowOpenCarObj.createDate }}
</p>
</bm-info-window>
<!--点击点显示的弹框 -->
<bm-info-window
:show="!bmaBnormalShow"
:position="{ lng: infoWindowOpenaBnormalObj.lng, lat: infoWindowOpenaBnormalObj.lat }"
@close="infoWindowCloseBnormal"
>
<p class="customerName">
<span>车辆名:</span>{{ infoWindowOpenaBnormalObj.vehicleName }}
</p>
<p class="customerName">
<span>报警状态:</span
>{{ infoWindowOpenaBnormalObj.status == 1 ? "报警" : "已处理" }}
</p>
<p class="customerName">
<span>时间:</span>{{ infoWindowOpenaBnormalObj.createDate }}
</p>
</bm-info-window>
<!--路线标签 需要路线数组可以自己生成一条线-->
<bm-polyline
:path="routeList"
stroke-color="blue"
:stroke-opacity="1"
:stroke-weight="2"
>
</bm-polyline>
</baidu-map>
主标签的基本信息配置 其他数据都是业务数据我这块就不显示了 都是数组格式,如果实在不知道数据格式可以去官网看看
baidumap: {
center: { lng: 108.944, lat: 34.335 },
address: '西安',
zoom: 1,
location: '西安',
min_zoom: 11,
max_zoom: 18,
},
常显示文字样式 bm-overlay样式
.sample {
width: 120px;
// height: 40px;
line-height: 40px;
// background: rgba(0, 0, 0, 0.5);
overflow: hidden;
// box-shadow: 0 0 5px #000;
color: #000;
text-align: center;
padding: 10px;
position: absolute;
}
.sample.active {
color: #000;
}
.sample div {
box-sizing: border-box;
display: flex;
// justify-content: space-around;
background: rgb(238, 238, 179);
border: 2px solid #679af4;
border-radius: 20px;
width: 110px;
height: 26px;
color: #333;
& > p {
text-align: center;
height: 23px;
line-height: 23px;
}
& > p:nth-child(1) {
width: 55%;
color: #fff;
background: #679af4;
border-radius: 20px;
}
& > p:nth-child(2) {
width: 45%;
text-align: center;
}
// width: 100%;
// height: 50%;
// margin: 0 auto;
// text-align: center;
}