#写在前面
因为开发需要，弄了一个小的获取百度地图经纬度的取点小工具。方便自己取点，不规则区域取点，行政区域搜索取点。自动获取经纬度。(咳咳，最近感觉GitHub有点慢？？？？所以转移到了gitee)
项目地址（gitee）：https://gitee.com/lovezengcheng/baidumap-getpoint | 【点击跟踪项目地址】
取点工具.jpg
1，引入vue-baidu-map，element，scss，这个就不说了把。
2，页面代码
<template>
<div class="map-all">
<baidu-map
class="bm-view"
:center="center"
:zoom="zoom"
:dragging="!isEdit"
:double-click-zoom="!isEdit"
@ready="handler"
:min-zoom="5"
:max-zoom="18"
:mapClick="false"
@click="mapClick"
>
<!-- 缩放 -->
<bm-navigation
anchor="BMAP_ANCHOR_BOTTOM_RIGHT"
:offset="{ width: 10, height: 40 }"
></bm-navigation>
<bm-city-list
anchor="BMAP_ANCHOR_TOP_RIGHT"
:offset="{ width: 20, height: 20 }"
></bm-city-list>
<bm-polygon
:path="polygonPath"
stroke-color="blue"
:stroke-opacity="0.5"
:stroke-weight="2"
:editing="isEdit"
@lineupdate="updatePolygonPath"
/>
</baidu-map>
<div class="dot-list">
<div class="dot-list-btn">
<el-button type="primary" size="medium" @click="clearBtn"
><i class="el-icon-document-copy" /> 清空</el-button
>
<el-button
size="medium"
:type="isEdit ? 'success' : 'primary'"
@click="startEdit"
><i :class="isEdit ? 'el-icon-close' : 'el-icon-check'" /> {{
isEdit ? "关闭绘制" : "开始绘制"
}}</el-button
>
</div>
<h3 v-if="mapPinot">当前点击点的经纬度</h3>
<div class="dot-list-top" v-if="mapPinot">{{ mapPinot }}</div>
<h3>框选区域的点的集合</h3>
<div class="search-city">
<el-input
placeholder="请输入行政区域搜索"
size="medium"
v-model="searchInput"
class="input-with-select"
>
<el-button
type="primary"
slot="append"
icon="el-icon-search"
@click="searchCity(searchInput)"
></el-button>
</el-input>
</div>
<div class="dot-list-text">
<p>[</p>
<span v-for="(item, index) in polygonPath" :key="index"
>{{ item }}<em v-if="index !== polygonPath.length - 1">,</em></span
>
<p>]</p>
</div>
<div class="dot-list-center" v-if="polygonPath.length > 1">
<el-button
type="danger"
size="medium"
@click="getPolygonCenter(polygonPath)"
>获取中心点</el-button
>
<div class="dot-list-txt" v-if="polygonCenter">{{ polygonCenter }}</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: "baidumap",
data() {
return {
center: "深圳",
zoom: 19,
map: null,
BMap: null,
textarea: "",
isEdit: false,
polygonPath: [],
mapPinot: null,
polygonCenter: null,
searchInput: "",
};
},
methods: {
handler({ BMap, map }) {
this.map = map;
this.BMap = BMap;
map.enableScrollWheelZoom(true);
map.setDefaultCursor("pointer");
},
updatePolygonPath(e) {
this.polygonPath = e.target.getPath();
},
// 是否开启取点画框
startEdit() {
this.isEdit = !this.isEdit;
},
// 点击地图 取点
mapClick(type) {
if (this.isEdit) {
this.polygonPath.push(type.point);
}
this.mapPinot = type.point;
},
// 清除
clearBtn() {
this.polygonPath = [];
this.mapPinot = null;
this.polygonCenter = null;
this.searchInput = "";
},
// 获取中心点
getPolygonCenter(polygonPath) {
if (polygonPath.length > 1) {
let lngTotal = 0;
let latTotal = 0;
let len = polygonPath.length;
polygonPath.forEach((element) => {
lngTotal += element.lng;
latTotal += element.lat;
});
const lngCenter = (lngTotal / len).toFixed(8);
const latCenter = (latTotal / len).toFixed(8);
this.polygonCenter = { lng: lngCenter, lat: latCenter };
} else {
this.$message.error("请先选择区域，获取范围点!");
}
},
// 搜索
searchCity(input) {
this.polygonPath = [];
let bdary = new BMap.Boundary();
bdary.get(input, (rs) => {
rs.boundaries.forEach((item) => {
let arrTemp = item.split(";");
arrTemp.forEach((element) => {
let arrPint = element.split(",");
this.polygonPath.push({
lng: Number(arrPint[0]),
lat: Number(arrPint[1]),
});
});
});
});
// 获取所有点的最佳视图
setTimeout(() => {
this.getPolygonCenter(this.polygonPath);
this.map.setViewport(this.polygonPath);
}, 500);
},
},
};
</script>
<style lang="scss" scoped="scoped">
.map-all ::v-deep .city_content_top {
padding: 15px 10px 25px 10px;
.sel_city_input {
height: 24px !important;
line-height: 24px !important;
}
}
.map-all {
position: relative;
.bm-view {
position: absolute;
left: 0;
top: 0;
z-index: 1;
width: 100%;
height: 100vh;
cursor: pointer;
}
.dot-list {
position: absolute;
top: 0;
left: 0;
padding: 10px;
z-index: 100;
width: 300px;
height: 100vh;
background: rgba(0, 0, 0, 0.5);
h3 {
padding: 5px;
color: rgba(255, 255, 255, 0.8);
font-size: 14px;
}
.dot-list-text {
background: #fff;
min-height: 300px;
padding: 10px;
max-height: calc(100vh - 360px);
overflow: auto;
font-size: 14px;
color: #555;
border-radius: 4px;
line-height: 1.4em;
span {
display: block;
}
p {
padding: 5px;
}
}
.dot-list-top {
background: #fff;
padding: 10px;
font-size: 14px;
color: #555;
border-radius: 4px;
}
}
.dot-list-btn {
padding: 10px;
text-align: center;
display: flex;
button {
width: 100%;
}
}
.dot-list-center {
padding-top: 10px;
button {
width: 100%;
}
}
.dot-list-txt {
margin-top: 10px;
padding: 10px;
border-radius: 4px;
background: #fff;
font-size: 14px;
color: #555;
line-height: 1.4em;
}
.search-city {
margin-bottom: 10px;
}
}
</style>
网友评论