foreword
With the development of the Internet, map applications have become an indispensable part of people's lives. In the development process, how to quickly and conveniently realize the function of map point selection has become a problem that has attracted much attention. This article will introduce how to use Baidu map and vue to quickly realize the function of map point selection and encapsulate it into a reusable component. Whether you are developing a map application or need to use the map point selection function in your project, this article will provide you with some useful references.
Preparation
1. First, you need to register a Baidu account and log in to the Baidu map open platform. Refer to official development documents
2. Click on the upper right corner to enter the console and apply for registration as a developer.
After submission, get the application key (ak) in "Application Management" - "My Application"
3. In publicthe directory index.htmlfile, add the following reference
<script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=你的密钥"></script>
4. npmPackage
npm i vue-baidu-map --save
main.jsregister
import BaiduMap from 'vue-baidu-map'
Vue.use(BaiduMap,{
ak:'你的密钥'})
Implementation ideas
- Introduce Baidu map
API; vueCreate a map container in the component ;- Initialize the map and add map controls;
- Listen to the map click event to obtain the latitude and longitude of the clicked location;
- Add a marker on the map and set the marker position to the clicked position;
- Reversely analyze the latitude and longitude to get the detailed address;
- Save the latitude, longitude and detailed address of the marked location into variables and pass it on.
Not much to say, let's go directly to the actual combat
package file
<template>
<div>
<el-dialog :close-on-click-modal="false" :visible.sync="dialogVisible" width="80%">
<baidu-map @moving="syncCenterAndZoom" @moveend="syncCenterAndZoom" @zoomend="syncCenterAndZoom" class="bm-view" :center="center"
:zoom="zoom" :scroll-wheel-zoom="true" @click="getClickInfo">
<bm-marker :position="{lng: center.lng, lat: center.lat}" :dragging="true" animation="BMAP_ANIMATION_BOUNCE">
</bm-marker>
<bm-control :offset="{width: '10px', height: '10px'}">
<bm-auto-complete v-model="keyword" :sugStyle="{zIndex: 9999}">
<input type="text" placeholder="请输入搜索关键字" class="serachinput">
</bm-auto-complete>
</bm-control>
<bm-local-search :keyword="keyword" :auto-viewport="true" style="width:0px;height:0px;overflow: hidden;"></bm-local-search>
</baidu-map>
<div class="btnBox">
<el-button size="medium" type="primary" @click="confirm">确定</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
export default {
data: function () {
return {
dialogVisible: this.value, //弹框显隐
keyword: "", //搜索关键字
center: {
lng: 116.404555, lat: 39.915599 }, //经纬度
zoom: 13, //缩放级别
address: "", //详细地址
point: {
lng: 116.404555, lat: 39.915599 }, //经纬度
};
},
props: {
value: Boolean,
},
methods: {
// 打开弹框
revealShow() {
this.dialogVisible = true;
},
// 点击地图
getClickInfo(e) {
this.center.lng = Number(e.point.lng).toFixed(6);
this.center.lat = Number(e.point.lat).toFixed(6);
this.geocAddress(e.point);
},
// 地图缩放、地图缩放、移动过程中持续触发
syncCenterAndZoom(e) {
const {
lng, lat } = e.target.getCenter();
this.center.lng = Number(lng).toFixed(6);
this.center.lat = Number(lat).toFixed(6);
this.zoom = e.target.getZoom();
this.geocAddress(e.target.getCenter());
},
// 逆向解析地址
geocAddress(point) {
let that = this;
var geoc = new BMap.Geocoder();
geoc.getLocation(point, function (geocInfo) {
if (geocInfo) {
let detailsInfo = geocInfo.addressComponents;
let address =
detailsInfo.province +
detailsInfo.city +
detailsInfo.district +
detailsInfo.street +
detailsInfo.streetNumber;
if (geocInfo.surroundingPois.length > 0) {
address = address + geocInfo.surroundingPois[0].title;
}
that.address = address;
that.point = point;
}
});
},
// 确认
confirm() {
this.dialogVisible = false;
this.$emit("confirmOn", this.point, this.address);
},
},
};
</script>
<style scoped>
.bm-view {
width: 100%;
height: 60vh;
}
.serachinput {
margin: 10px;
width: 300px;
border: none;
border-radius: 4px;
padding: 0px 10px;
height: 40px;
line-height: 40px;
border: 1px solid #dcdfe6;
color: #606266;
}
.btnBox {
margin-top: 20px;
display: flex;
justify-content: right;
}
/* 去除百度地图的图标 根据实际情况看是否要加样式穿透 */
/* ::v-deep .anchorBL {
display: none !important;
} */
</style>
use file
<template>
<div>
<el-card class="box-card">
<div style="margin-bottom:10px">
<p>经度：{
{center.lng ? center.lng : "--"}}</p>
<p>维度：{
{center.lat ? center.lat : "--"}}</p>
<p>地址：{
{address ? address : "--"}}</p>
</div>
<el-button size="mini" type="primary" @click="openMapDialog">打开地图</el-button>
</el-card>
<!-- 地图组件 -->
<div>
<geographicalMap @confirmOn="ensureOn" ref="bmapAddressSelect"></geographicalMap>
</div>
</div>
</template>
<script>
import geographicalMap from "./mapView";
export default {
components: {
geographicalMap,
},
data() {
return {
center: {
lng: "", lat: "" },
address: "",
};
},
methods: {
// 打开地图
openMapDialog() {
this.$refs.bmapAddressSelect.revealShow();
},
// 确定
ensureOn(center, address) {
this.center = center;
this.address = address;
},
},
};
</script>
achieve effect
