#寫在前面
因?yàn)殚_(kāi)發(fā)需要杭攻，弄了一個(gè)小的獲取百度地圖經(jīng)緯度的取點(diǎn)小工具祟敛。方便自己取點(diǎn)，不規(guī)則區(qū)域取點(diǎn)兆解，行政區(qū)域搜索取點(diǎn)馆铁。自動(dòng)獲取經(jīng)緯度。(咳咳锅睛，最近感覺(jué)GitHub有點(diǎn)慢埠巨？历谍？？辣垒？所以轉(zhuǎn)移到了gitee)
項(xiàng)目地址（gitee）：https://gitee.com/lovezengcheng/baidumap-getpoint | 【點(diǎn)擊跟蹤項(xiàng)目地址】
取點(diǎn)工具.jpg
1望侈，引入vue-baidu-map，element勋桶，scss脱衙，這個(gè)就不說(shuō)了把。
2例驹，頁(yè)面代碼
<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 ? "關(guān)閉繪制" : "開(kāi)始繪制"
}}</el-button
>
</div>
<h3 v-if="mapPinot">當(dāng)前點(diǎn)擊點(diǎn)的經(jīng)緯度</h3>
<div class="dot-list-top" v-if="mapPinot">{{ mapPinot }}</div>
<h3>框選區(qū)域的點(diǎn)的集合</h3>
<div class="search-city">
<el-input
placeholder="請(qǐng)輸入行政區(qū)域搜索"
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)"
>獲取中心點(diǎn)</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();
},
// 是否開(kāi)啟取點(diǎn)畫框
startEdit() {
this.isEdit = !this.isEdit;
},
// 點(diǎn)擊地圖 取點(diǎn)
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 = "";
},
// 獲取中心點(diǎn)
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("請(qǐng)先選擇區(qū)域岂丘，獲取范圍點(diǎn)!");
}
},
// 搜索
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]),
});
});
});
});
// 獲取所有點(diǎn)的最佳視圖
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>
