index.html引入
<script src="https://api.map.baidu.com/api?type=webgl&v=1.0&ak=你的ak"></script>
组件使用
<el-input
:disabled="['详情'].includes(title)"
v-model="formData.site"
placeholder=""
>
<template slot="append">
<el-button
type="primary"
icon="iconfont if-ditudingwei"
:disabled="['详情'].includes(title)"
style="color: #1492ff"
@click="choosePosition"
>选择
</el-button>
</template>
</el-input>
<positionDialog @on-response="getPosition" ref="positionDialog" />
import positionDialog from "@/components/Map/positionDialog/positionDialog.vue";
components: {positionDialog},
getPosition(e) {
console.log(e);
this.$set(this.formData, "longitude", e.lng);
this.$set(this.formData, "latitude", e.lat);
},
choosePosition() {
let passData = {
data: JSON.parse(JSON.stringify({
lng: this.formData.longitude,
lat: this.formData.latitude,
})),
type: "地图选点",
};
this.$refs.positionDialog.showDialog(passData);
},positionDialog组件封装
<template>
<el-dialog
width="1000px"
v-dialog-drag
:title="title"
:visible.sync="dialogVisible"
:before-close="hideDialog"
append-to-body
>
<div class="wrap-box">
<!-- 搜索显示框 -->
<el-form v-if="!hasNoSearch" class="formWrap" label-width="90px">
<el-col :span="12">
<el-form-item
label="搜索 : "
prop="keyword"
style="position: relative"
>
<el-input id="search" v-model="keyword" @input="searchPositionList">
</el-input>
<div class="wrap-search" v-if="searchList.length > 0">
<div
class="wrap-search-item"
v-for="(item, index) in searchList"
:key="index"
@click="selectAddress(item)"
>
<div style="width: 80%">{{ item }}</div>
<div style="width: 20%; text-align: right">
<i class="iconfont if-biaodancaozuo-fabu"></i>
</div>
</div>
</div>
</el-form-item>
<!-- <label
>搜索：<el-input v-model="keyword">
<el-button
slot="append"
icon="el-icon-search"
></el-button></el-input
></label> -->
</el-col>
<el-col :span="6">
<el-form-item label="经度： " prop="lng">
<el-input v-model="formData.lng"></el-input>
</el-form-item>
<!-- <label>经度：<el-input v-model="formData.lng" /></label> -->
</el-col>
<el-col :span="6">
<el-form-item label="纬度： " prop="lat">
<el-input v-model="formData.lat" />
</el-form-item>
</el-col>
</el-form>
<!-- 地图盒子 -->
<div id="allmap"></div>
</div>
<span slot="footer" class="dialog-footer">
<el-button @click="hideDialog">取 消</el-button>
<el-button type="primary" @click="submitForm">确 定</el-button>
</span>
</el-dialog>
</template>
<script>
export default {
name: "positionDialog",
components: {},
props: {
hasNoSearch: {
type: Boolean,
defalut: false, //是否有搜索框
},
hasNoChoosePosition: {
type: Boolean,
defalut: false, //是否可以改变选择的坐标点
},
},
data() {
return {
dialogVisible: false,
title: "",
keyword: "",
location: "",
mapCenter: {
lng: 103.653534,
lat: 30.998257,
},
formData: {},
mapZoom: 13,
map: null,
marker: null, //坐标点
searchInput: null, //搜索
searchList: [],
};
},
methods: {
// 选择检索的列表项
selectAddress(value) {
this.keyword = value;
this.getAddress(value);
},
// 解析地址
getAddress(e) {
let that = this;
let myGeo = new BMapGL.Geocoder();
// 将地址解析结果显示在地图上，并调整地图视野
myGeo.getPoint(
e,
function (point) {
if (point) {
console.log(point);
point = {
lng: point.lng.toFixed(6),
lat: point.lat.toFixed(6),
};
that.$set(that.formData, "lng", point.lng);
that.$set(that.formData, "lat", point.lat);
that.map.centerAndZoom(new BMapGL.Point(point.lng, point.lat), 14); //设置中心点
that.setMarker(point.lng, point.lat); //设置坐标点
that.searchList = [];
}
},
""
);
},
searchPositionList(e) {
let that = this;
let option = {
onSearchComplete: function (results) {
// 判断状态是否正确
if (local.getStatus() == BMAP_STATUS_SUCCESS) {
var list = [];
for (var i = 0; i < results.getCurrentNumPois(); i++) {
// console.log(results.getPoi(i));
list.push(results.getPoi(i).address);
}
that.searchList = list;
}
},
// pageCapacity: 5,
};
var local = new BMapGL.LocalSearch(this.map, option);
local.search(e);
},
showDialog(data) {
console.log("showDialog", data);
this.title = data.type;
this.formData = data.data;
if (this.formData.lng && this.formData.lat) {
this.mapCenter.lng = this.formData.lng;
this.mapCenter.lat = this.formData.lat;
}
this.dialogVisible = true;
this.initMap();
},
setMarker(lng, lat) {
if (this.marker) {
this.map.removeOverlay(this.marker);
this.marker = null;
}
setTimeout(() => {
let point = new BMapGL.Point(lng, lat); //创建点
this.marker = new BMapGL.Marker(point); // 创建标注
this.map.addOverlay(this.marker);
console.log(lng, lat);
}, 100);
},
hideDialog() {
console.log("hideDialog");
this.formData = {};
this.keyword = "";
this.dialogVisible = false;
},
getClickInfo(e) {
console.log("地图点击", e);
},
submitForm() {
if (!this.formData.lng || !this.formData.lat) {
this.$message.error("请选择位置");
} else {
this.$emit("on-response", this.formData);
this.hideDialog();
}
},
initMap() {
let that = this;
this.$nextTick(() => {
// 按住鼠标右键，修改倾斜角和角度
this.map = new BMapGL.Map("allmap"); // 创建Map实例
this.map.centerAndZoom(
new BMapGL.Point(this.mapCenter.lng, this.mapCenter.lat),
12
); // 初始化地图,设置中心点坐标和地图级别
// this.searchInput = new BMapGL.Autocomplete({
// //建立一个自动完成的对象
// input: "search",
// location: this.map,
// });
this.setMarker(this.mapCenter.lng, this.mapCenter.lat);
this.map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
this.map.setHeading(64.5); //设置高度
this.map.setTilt(0); //设置角度
var geoc = new BMapGL.Geocoder();
if (!this.hasNoChoosePosition) {
this.map.addEventListener("click", function (e) {
console.log(e);
// let pt = {
// lng: e.latlng.lng.toFixed(6),
// lat: e.latlng.lat.toFixed(6),
// };
let pt = e.latlng
that.$set(that.formData, "lat", pt.lat);
that.$set(that.formData, "lng", pt.lng);
// that.$set(that.mapCenter, "lat", pt.lat);
// that.$set(that.mapCenter, "lng", pt.lng);
that.setMarker(pt.lng, pt.lat);
geoc.getLocation(pt, function (rs) {
console.log(rs, "res")
var addComp = rs.addressComponents;
that.keyword =
addComp.province +
addComp.city +
addComp.district +
addComp.street +
addComp.streetNumber;
});
});
}
});
},
},
created() {},
mounted() {
// this.initMap();
},
};
</script>
<style lang="scss" scoped>
::v-deep .el-dialog__body {
padding: 10px 0 0 !important;
}
#allmap {
height: 500px;
width: 100%;
overflow: hidden;
}
.wrap-box {
position: relative;
.formWrap {
position: absolute;
top: 10px;
left: 10px;
z-index: 99999;
}
.wrap-search {
position: absolute;
z-index: 9999;
width: 100%;
background-color: #fff;
box-shadow: 1px 1px 4px #f0f0f0;
max-height: 300px;
// width: 250px;
overflow-y: auto;
&-item {
width: 100%;
padding: 10px 10px;
display: flex;
justify-content: space-between;
align-items: center;
cursor: pointer;
&:hover {
background-color: #f0f0f0;
}
}
}
}
</style>