<template>标签:vue,JavaScript,API,polygonPath,lat,40.819445,lng,centerPoint,id From: https://www.cnblogs.com/zhangzikang/p/16726019.html
<div class="component">
<el-card class="cardStyle">
<!-- ready,地图组件渲染完毕时触发,返回一个百度地图的核心类和地图实例 -->
<baidu-map
id="map"
class="mapStyle"
:center="centerPoint"
:zoom="10"
:scroll-wheel-zoom="true"
@ready="handler"
@click="getPoint"
>
<!--镂空面绘制-->
<bm-polygon
:path="polygonPath"
stroke-color="red"
:stroke-opacity="0.5"
:stroke-weight="2"
:editing="true"
@lineupdate="updatePolygonPath"
/>
<!--点聚合以及marker点标记-->
<bml-marker-clusterer :average-center="true" >
<bm-marker v-for="marker of markerArr" :position="{lng: marker.lng, lat: marker.lat}" />
</bml-marker-clusterer>
<!--行政区划-->
<bm-boundary name="内蒙古自治区"
:strokeWeight="2"
strokeColor="blue"
fillColor="transparent"
/>
<bm-label
content=""
:position="{lng: 111.708897, lat: 40.827552}"
:labelStyle="{color: 'red', fontSize : '24px'}"
title="鄂博云矿区"/>
<!--Marker点-->
<!-- <bm-marker-->
<!-- v-for="marker in markerArr"-->
<!-- :key="marker.id"-->
<!-- :position="marker"-->
<!-- animation="BMAP_ANIMATION_BOUNCE"-->
<!-- />-->
</baidu-map>
</el-card>
</div>
</template>
<script>
import {BmlMarkerClusterer} from 'vue-baidu-map'
export default {
data() {
return {
//中心轴坐标
centerPoint: {
lng: 0,
lat: 0,
},
markerArr: [
{
id: 0,
lng: 111.642458,
lat: 40.819445,
},
],
polygonPath: [
{lng: 111.708897, lat: 40.827552},
{lng: 111.715221, lat: 40.815323},
{lng: 111.743104, lat: 40.821219},
{lng: 111.737642, lat: 40.833229},
],
markerPoint: {},
};
},
components : {
BmlMarkerClusterer
},
methods: {
// 完成一次组件卸载 / 重新加载的方法,重新渲染
handler() {
this.centerPoint.lng = 111.642458;
this.centerPoint.lat = 40.819445;
},
// 添加点击函数,点击后修改marker的经纬度
getPoint(e) {
// 点击获取point经纬度
const { lng, lat } = e.point;
// 获取一个随机不重复的字符串做为id
let id = new Date().getTime() + parseInt(Math.random() * 10000);
// 新增一个marker标记
this.markerArr.push({
id: id,
lng: lng,
lat: lat,
});
// console.log(this.markerArr)
},
updatePolygonPath (e){
this.polygonPath = e.target.getPath()
},
// addPolygonPoint(e) {
// this.polygonPath.push({lng : 111.642458,lat :40.819445})
// }
},
};
</script>
<style scoped>
.mapStyle {
width: 100%;
height: calc(100vh - 130px);
}
.cardStyle {
height: calc(100vh - 130px);
}
</style>