<template>
<div class="mapMain">
<el-input v-model="addressKeyword" v-on:input='getSearchCon()' class="searchInput"
placeholder="请输入地址来直接查找相关位置"></el-input>
<el-row
:gutter="20"
style="padding: 20px 0; margin: 20px 0; border: 1px solid #ccc; border-radius: 4px"
>
<el-col :span="3">
<el-input placeholder="查询" v-model="address"></el-input>
</el-col>
<el-col :span="21">
<el-button type="primary" @click="toggle('polygonPath')"
>{{ polygonPath.editing ? '重新绘制' : '开始绘制' }}
</el-button>
<el-button type="primary" @click="polygonPath.editing=true">编辑</el-button>
<el-button type="primary" @click="save">保存</el-button>
</el-col>
</el-row>
<baidu-map :map-click="false"
@click="drawLine" class="bmView" :scroll-wheel-zoom="true" @ready="handler" :center="center"
style="height:1080px"
:zoom="zoom" ak="http://17.22.40.34:8219/baidumap/jsapi/api.js">
<!--比例尺控件-->
<bm-scale anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-scale>
<!--缩放控件-->
<bm-navigation anchor="BMAP_ANCHOR_BOTTOM_RIGHT"></bm-navigation>
<bm-view style="width: 100%; height:1080px; flex: 1"></bm-view>
<!---引入bm-polygon 才能绘制图形-->
<bm-polygon
:path="path"
v-for="path of polygonPath.paths"
:key="path.toString()"
stroke-color="blue"
fill-color="red"
:fill-opacity="0.1"
:stroke-opacity="0.5"
:stroke-weight="2"
:editing="polygonPath.editing"
@lineupdate="updatePolygonPath"
></bm-polygon>
<bm-marker
v-for="(item, index) in polygonPath.paths[0]"
:position="item"
:key="index"
:dragging="false"
></bm-marker>
<bm-local-search :keyword="addressKeyword" :auto-viewport="true" style="display: none"></bm-local-search>
</baidu-map>
</div>
<el-dialog title="" align="left" width="80%" :visible.sync="innerVisible">
<desinfo @handleDialogClose="handleDialogClose" :desinfoPageParam='desinfoPageParam' ref='infoPage'></desinfo>
</el-dialog>
</div>
</template>
<script>
import BaiduMap from 'vue-baidu-map/components/map/Map.vue'
import BmView from 'vue-baidu-map/components/map/MapView.vue'
import BmLocalSearch from 'vue-baidu-map/components/search/LocalSearch.vue'
import BmScale from 'vue-baidu-map/components/controls/Scale'
import BmNavigation from 'vue-baidu-map/components/controls/Navigation'
import BmMarkerClusterer from 'vue-baidu-map/components/extra/MarkerClusterer'
import BmMarker from 'vue-baidu-map/components/overlays/Marker'
import BmInfoWindow from 'vue-baidu-map/components/overlays/InfoWindow'
import desinfo from './Desinfo'
import BmPolygon from "vue-baidu-map/components/overlays/Polygon";
export default {
name: 'TestBaiDu',
components: {
BaiduMap,
BmView,
BmLocalSearch,
BmScale,
BmNavigation,
BmMarkerClusterer,
BmMarker,
BmInfoWindow,
desinfo,
BmPolygon
},
data() {
return {
address: '',
polygonPath: {
editing: false,
paths: [[{"lng": 117.354751, "lat": 39.054754}, {"lng": 117.442138, "lat": 39.052065}, {
"lng": 117.37976,
"lat": 39.002959
}]] // 绘制完成后的经纬度,其实是在画的时候动态push的,因为在点击的时候触发了 paintPolygon 函数
},
innerVisible: false,
desinfoPageParam: {
id: '',
name: ''
},
lngLatArr2: [{
longitude: 117.023621,
latitude: 39.374409,
name: '测试一'
}, {
longitude: 117.307892,
latitude: 39.704835,
name: '测试二'
}, {
longitude: 21.494243,
latitude: 26.299542,
name: '测试三'
}],
lngLatArr: [{
longitude: 117.225495,
latitude: 39.087195,
name: '测试一'
}, {
longitude: 117.515259,
latitude: 38.931397,
name: '测试二'
}],
isHide: false, // 是否显示标签内容
staticimg: './static/ld_ld.png',
}
],
addressKeyword: '',
center: {
lng: 109.45744048529967,
lat: 36.49771311230842
},
zoom: 16,
districtLoading: 0,
blist: [],
infoWindow: {
lng: 0,
lat: 0,
show: false,
info: {
air: 0,
area: 12313,
areaEnergy: 0.64,
code: "440300A055",
energy: 7922.66,
lat: "32.043433",
lng: "118.784107",
name: "市人民检察院",
water: 0
},
},
}
},
mounted: function () {
},
methods: {
handler({
BMap,
map
}) {
var point = new BMap.Point(117.225495, 39.087195)
map.centerAndZoom(point, 8); // 将point点放入map中,展示在页面中心展示,10=缩放程度
map.enableScrollWheelZoom(); // 开启滚动鼠标滑轮
},
// 开启多边形绘制
toggle(name) {
this[name].editing = !this[name].editing;
// 在这里做一步判断,如果有路径且开启绘制就把原来的路径清空
if (this.polygonPath.paths) {
this.polygonPath.paths = [];
}
},
// 鼠标左键键多边形绘制
drawLine(e) {
if (!this.polygonPath.editing) {
return;
}
const {paths} = this.polygonPath;
!paths.length && paths.push([]);
paths[0].push(e.point);
},
// 修改拖拽坐标
updatePolygonPath(e) {
this.polygonPath.paths[0] = e.target.getPath();
},
// 鼠标移动时
syncPolygon(e) {
// this.polygonPath.editing = true
if (!this.polygonPath.editing) {
return
}
const {paths} = this.polygonPath
if (!paths.length) {
return
}
const path = paths[paths.length - 1]
if (!path.length) {
return
}
if (path.length === 1) {
path.push(e.point)
}
this.$set(path, path.length - 1, e.point)
},
// 鼠标左键点击时往路径里push一个点
newPolygon(e) {
if (!this.polygonPath.editing) {
return
}
// 当开始绘制后把按钮调回开始绘制状态,防止绘制多个图形
this['polygonPath'].editing = !this['polygonPath'].editing
const {paths} = this.polygonPath
if (!paths.length) {
paths.push([])
}
const path = paths[paths.length - 1]
path.pop()
if (path.length) {
paths.push([])
}
},
// 鼠标右键多边形绘制完成
// 保存
save() {
console.log(JSON.stringify(this.polygonPath.paths))
//debugger
if (!this.polygonPath.editing) {
return;
}
// 当开始绘制后把按钮调回开始绘制状态,防止绘制多个图形
this["polygonPath"].editing = !this["polygonPath"].editing;
const {paths} = this.polygonPath;
if (!paths.length) {
paths.push([]);
}
if (paths[0].length > 2) { // 3个点才能成区域
// 保存处理相关坐标和请求接口
var str = JSON.stringify(this.polygonPath.paths[0]);
var params = JSON.stringify({
name: "123",
area: str
});
console.warn(params, 99999);
}
},
}
}
</script>
<style scoped lang="less" type="text/less">
.mapMain {
.searchInput.el-input {
position: absolute;
top: 13px;
z-index: 10;
left: 16px;
width: 350px;
}
.rightNav {
z-index: 8;
position: absolute;
right: 0px;
width: 150px;
height: 300px;
top: 50px;
ul {
li {
background: #333333;
opacity: 0.7;
color: #000000;
background-color: rgba(0, 0, 0, 0.86);
box-shadow: 1px 1px 5px #888888;
color: #FFFFFF;
line-height: 40px;
position: relative;
margin: 5px 0px;
border-radius: 5px;
width: 137px;
text-align: center;
cursor: pointer;
img {
position: absolute;
left: 8px;
top: 9px;
}
}
li:hover {
background: #333333;
opacity: 0.9;
}
}
.laberCon {
width: 300px;
background: #fff;
position: absolute;
right: 10px;
height: 400px;
top: 0px;
.labelTitle {
background: #ccc;
padding: 6px;
}
.listMain {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
.listCon {
display: flex;
line-height: 28px;
font-size: 14px;
margin: 5px auto;
img {
width: 26px;
height: 26px;
}
}
}
}
}
}
</style>
vue-baidu-map 绘制任意图形
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
- 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...