点击地图获取金纬度跟地址详情。同时解决地图标记一直不在中央,在左上角的问题。
先上效果图:
第一步引入百度地图:
在目录public -> index.html中引用该地址
<script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=自己百度地图申请"></script>
第二代码:
<!--获取经纬度-->
<template>
<div>
<div class="content-box">
<span style="margin-right: 20px;">{{sendO.lng}} , {{sendO.lat}}</span>
<el-input v-model="searchVal" placeholder="请输入内容" maxlength="20" style="width: 220px;"></el-input>
<el-button @click="searchFun">搜索</el-button>
<div class="search-list" v-if="isOpen">
<div class="select-item" v-for="item in resutSearchList" @click="handlerSelect(item)">{{item.address}}</div>
</div>
</div>
<div id="mapApp" v-if="isOpenMap">
</div>
</div>
</template>
<script>
export default {
name: "showMap",
data() {
return {
isOpen: false,
sendO: {
lng: this.lng,
lat: this.lat,
info: {}
},
map: null,
local: null,
searchVal: null,
resutSearchList: [],
myGeo: new BMap.Geocoder(),
}
},
mounted() {
this.initMap2();
},
updated() {
this.initMap2();
},
methods: {
addEvent() {
this.map.addEventListener("click", (r) => {
this.sendO.lng = r.point.lng;
this.sendO.lat = r.point.lat;
this.reverse();
this.addMarker(this.map);
})
},
initMap2() {
if(!this.isOpenMap)return;
this.map = new BMap.Map("mapApp");
this.addEvent();
if (!this.sendO.lat) {
this.sendO.lat = 39.915573;
}
if (!this.sendO.lng) {
this.sendO.lng = 116.401314;
}
this.map.enableScrollWheelZoom(true);
this.addMarker(this.map);
this.local = new BMap.LocalSearch(this.map, { //智能搜索
onSearchComplete: this.search
});
//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;
//console.log(str)
//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;
//console.log(myValue)
//G("searchResultPanel").innerHTML ="onconfirm<br />index = " + e.item.index + "<br />myValue = " + myValue;
//setPlace();
//});
},
reverse() {
let then = this;
// 创建地理编码实例
// var myGeo = new BMap.Geocoder();
// 根据坐标得到地址描述
this.myGeo.getLocation(new BMap.Point(this.sendO.lng, this.sendO.lat), function(result) {
if (result) {
then.sendO.info = result;
}
then.sendData();
})
},
addMarker(map) {
map.clearOverlays();
map.centerAndZoom(new BMap.Point(this.sendO.lng, this.sendO.lat), 12);
let marker1 = new BMap.Marker(new BMap.Point(this.sendO.lng, this.sendO.lat));
map.addOverlay(marker1);
},
search() {
let slist = this.local.getResults();
console.log(slist);
if (slist.length <= 0) {
this.$message('没找到信息');
return;
}
this.isOpen = true;
this.resutSearchList = this.local.getResults().Yr;
// var pp = this.local.getResults().getPoi(0).point; //获取第一个智能搜索的结果
},
searchFun(v) {
this.map.clearOverlays(); //清除地图上所有覆盖物
this.local.search(this.searchVal);
},
handlerSelect(v) {
this.isOpen = false;
this.map.clearOverlays(); //清除地图上所有覆盖物
this.sendO.lng = v.point.lng;
this.sendO.lat = v.point.lat;
this.addMarker(this.map);
this.reverse();
},
sendData() {
this.$emit("getMapInfo", this.sendO);
},
},
created() {},
watch: {
lat(n, o) {
this.sendO.lat = n;
},
lng(n, o) {
this.sendO.lng = n;
}
},
props: {
lng: {
type: [Number],
default: null
},
lat: {
type: [Number],
default: null
},
isOpenMap: {
type: [Boolean],
default: false
}
}
}
</script>
<style scoped lang="scss">
#mapApp {
overflow: hidden;
width: 760px;
height: 400px;
margin: 0;
font-family: "微软雅黑";
}
.content-box {
width: 800px;
position: relative;
.search-list {
position: absolute;
border: 1px solid #ccc;
z-index: 88888;
background-color: #fff;
min-width: 200px;
border-radius: 5px;
margin-left: 170px;
}
.select-item:hover {
background-color: #ccc;
cursor: pointer;
}
}
</style>
第三引入模块:
<el-dialog title="获取位置" :visible.sync="openMap" width="800px" append-to-body>
<showMap @getMapInfo="mapInfo" :lng="Number(form.longitude)" :lat="Number(form.latitude)" :isOpenMap="openMap" />
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="affirmMap">确 定</el-button>
<el-button @click="cancelMap">取 消</el-button>
</div>
</el-dialog>
export defualt{
data(){
openMap: false,
},
methods:{
handlerOpenMap(id) {
if(id){
getAddress(id).then(response => {
this.form = response.data;
});
}else{
this.reset();
}
this.openMap = true;
},
mapInfo(v) {
this.mapInfos = v;
},
}
}