封装的一个子组件 可以搜索 或者手动选取位置 传入经纬度 一镜到底可以直接用
<template>
<!-- 地图选择组件 -->
<div>
<el-dialog
:close-on-click-modal="false"
:visible.sync="hVisible"
width="30%"
>
<div class="form-layer">
<el-form label-width="100px" size="mini">
<!-- <el-form-item label="获取定位">
<el-button type="primary" @click="fixedPos">重新定位</el-button>
</el-form-item> -->
<el-form-item label="当前经度">
<span>{{longitude}}</span>
</el-form-item>
<el-form-item label="当前纬度">
<span>{{latitude}}</span>
</el-form-item>
<el-form-item>
<div class="f-a-c">
<el-input id="suggestId" v-model="keyWords" placeholder="请输入地区" style="width: 230px;margin-right: 6px;"></el-input>
<el-button type="primary" @click="setPlace" :disabled="!keyWords">查询</el-button>
</div>
<div id="searchResultPanel" style="border:1px solid #C0C0C0;width:150px;height:auto; display:none;"></div>
</el-form-item>
</el-form>
<div id="map"></div>
</div>
<div slot="footer" class="dialog-footer">
<el-button
size="small"
type="primary"
@click="btnSubmit()"
>确 认</el-button
>
<el-button size="small" @click="hVisible = false">取 消</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
export default {
name: "mapView",
props:{
visible:Boolean
},
data() {
return {
map: null,
local: null,
mk: null,
pointss:null,
latitude: '',
longitude: '',
keyWords: '',
marker:'',
addressy:''
};
},
mounted(){
this.initMap();
},
methods: {
// 打开弹窗,name为弹窗名称
// async openDialog(name) {
// this.text = name;
// this.hVisible = true;
// this.initMap();
// },
// 确认
btnSubmit() {
let key = {
latitude: this.latitude,
longitude: this.longitude,
address:this.addressy
}
console.log(key,'key',this.addressy);
// 打印经纬度
this.$emit("successadd", key);
this.hVisible = false;
},
initMap() {
this.$nextTick(() => {
this.map = new BMap.Map("map");
let point = new BMap.Point(120.418, 36.133);
this.map.centerAndZoom(point, 12);
this.map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放
this.map.addControl(new BMap.NavigationControl());
// 点击事件
this.map.addEventListener("click", this.showInfo);
// this.titleSearch()
// this.fixedPos(); //重新定位
});
},
// G(id) {
// return document.getElementById(id);
// },
// // 输入后文字提示
// titleSearch(){
// // 搜索
// var ac = new BMap.Autocomplete( //建立一个自动完成的对象
// {"input" : "suggestId"
// ,"location" : this.map
// });
// ac.addEventListener("onhighlight", function(e) { //鼠标放在下拉列表上的事件
// var str = "";
// var _value = e.fromitem.value;
// var value = "";
// if (e.fromitem.index > -1) {
// value = _value.province + _value.city + _value.district + _value.street + _value.business;
// }
// str = "FromItem<br />index = " + e.fromitem.index + "<br />value = " + value;
// value = "";
// if (e.toitem.index > -1) {
// _value = e.toitem.value;
// value = _value.province + _value.city + _value.district + _value.street + _value.business;
// }
// str += "<br />ToItem<br />index = " + e.toitem.index + "<br />value = " + value;
// this.G("searchResultPanel").innerHTML = str;
// });
// var myValue;
// ac.addEventListener("onconfirm", function(e) { //鼠标点击下拉列表后的事件
// var _value = e.item.value;
// myValue = _value.province + _value.city + _value.district + _value.street + _value.business;
// this.G("searchResultPanel").innerHTML ="onconfirm<br />index = " + e.item.index + "<br />myValue = " + myValue;
// this.setPlace();
// });
// },
// 点击事件
showInfo(e){
let that = this
that.latitude = e.point.lat //经度
that.longitude = e.point.lng //纬度
// 每次点击增加点位
that.pointss = new BMap.Point(that.longitude, that.latitude); // 创建标注的点
that.marker = new BMap.Marker(that.pointss); // 创建标注,
that.map.addOverlay(that.marker);
// 清除上一次选取的点位
let arr = that.map.getOverlays()
if(arr.length>1){
arr.forEach((item,index,input) => {
that.map.removeOverlay(input[index-1])
})
}
let gc = new BMap.Geocoder();
gc.getLocation(that.pointss, function (rs) {
console.log(rs,'rsss');
that.addressy = rs.address + rs.surroundingPois[0].title
})
},
// 点击重新定位-定位到当前位置
// fixedPos() {
// const _this = this;
// const geolocation = new BMap.Geolocation();
// this.confirmLoading = true;
// geolocation.getCurrentPosition(function (r) {
// if (this.getStatus() == BMAP_STATUS_SUCCESS) {
// _this.handleMarker(_this, r.point);
// let myGeo = new BMap.Geocoder();
// myGeo.getLocation(
// new BMap.Point(r.point.lng, r.point.lat),
// function (result) {
// _this.confirmLoading = false;
// if (result) {
// _this.latitude = result.point.lat;
// _this.longitude = result.point.lng;
// }
// }
// );
// } else {
// _this.$message.error("failed" + this.getStatus());
// }
// });
// },
// 搜索地址
setPlace() {
this.local = new BMap.LocalSearch(this.map, {
onSearchComplete: this.searchPlace,
});
this.local.search(this.keyWords);
},
searchPlace() {
if (this.local.getResults() != undefined) {
this.map.clearOverlays(); //清除地图上所有覆盖物
if (this.local.getResults().getPoi(0)) {
let point = this.local.getResults().getPoi(0).point; //获取第一个智能搜索的结果
this.map.centerAndZoom(point, 18);
this.handleMarker(this, point);
console.log("经度:" + point.lng + "--" + "纬度" + point.lat);
this.latitude = point.lat;
this.longitude = point.lng;
} else {
this.$message.error("未匹配到地点!");
}
} else {
this.$message.error("未找到搜索结果!");
}
},
// 设置标注
handleMarker(obj, point) {
let that = this;
obj.mk = new BMap.Marker(point);
obj.map.addOverlay(obj.mk);
obj.mk.enableDragging(); // 可拖拽
obj.mk.addEventListener("dragend", function (e) {
// 监听标注的拖拽,获取拖拽后的经纬度
that.latitude = e.point.lat;
that.longitude = e.point.lng;
});
obj.map.panTo(point);
},
},
computed: {
hVisible: {
get() {
return this.visible;
},
set(val) {
this.$emit("update:visible", val);
},
},
},
};
</script>
<style lang="scss" scoped>
.form-layer {
width: 100%;
}
#map {
margin-top: 30px;
width: 100%;
height: 300px;
border: 1px solid gray;
box-sizing: border-box;
overflow: hidden;
}
::v-deep .el-dialog {
min-width: 550px;
}
::v-deep .el-dialog__body {
padding: 10px;
}
// ::v-deep .tangram-suggestion-main {
// z-index: 99999999;
// width: 200px !important;
// }
</style>