使用:
点击按钮打开模态窗:
输入位置(支持模糊搜索)进行搜索,或者点击地图上的某处,进行位置获取。点击确定关闭模态窗,获取位置信息
上代码了~~~
父组件中使用
<template>
<div>
<a class="get-position" @click="getLocationFlag=true">
<el-icon class="el-icon-position" />
获取位置
</a>
<get-location
:get-position-flag="getLocationFlag"
@close="closePosition"
@getLocation="getLocation"
/>
</div>
</template>
import getLocation from "../../components/getLocation";
export default{
components:{
getLocation //子组件
},
data:{
return(){
getLocationFlag: false, //子组件弹窗显示或隐藏
}
},
methods:{
//todo 这个方法是获取子组件传给父组件中的位置信息 经纬度和位置名称
getLocation(data) {
(this.addForm.placeTude = data.location.lat),
(this.addForm.placeLong = data.location.lng),
(this.addForm.placeAddr = data.name);
this.$forceUpdate();
},
//todo 关闭子组件方法
closePosition() {
this.getLocationFlag = false;
},
}
}
获取地理位置的子组件封装
<template>
<el-dialog
title="获取位置信息"
:visible.sync="getPositionFlag"
width="30%"
:before-close="handleClose">
<div
class="amap-page-container"
style="width: 80%; position: relative; height: 500px; margin: 30px 10%"
>
<el-amap-search-box
class="search-box"
:search-option="searchOption"
:on-search-result="onSearchResult"
></el-amap-search-box>
<el-amap
ref="map"
vid="amapDemo"
:amap-manager="amapManager"
:center="center"
:zoom="zoom"
:plugin="plugin"
:events="events"
class="amap-demo"
>
</el-amap>
<div style="display:flex;justify-content:space-between;">
<div>
<p>{{ address }}</p>
<p>{{ center }}</p>
</div>
<el-button type='success' size='mini' @click="handleClose" style="height:40px;margin-top:20px">确定</el-button>
</div>
</div>
</el-dialog>
</template>
<script>
import { AMapManager } from "vue-amap";
let amapManager = new AMapManager();
export default {
name:'getPosition',
// 接收父组件传过来的信息
props:{
getPositionFlag:{
type:Boolean,
default:false
}
},
data() {
const self = this;
return {
locationMsg:{},
searchOption: {
// city: "北京", //搜索范围
// citylimit: true, //限制搜索范围
city: "",
citylimit: false, // 不限制搜索范围搜索,比如想全国搜索
},
lng: "",
lat: "",
address: "",
marker: "",
amapManager,
zoom: 12,
center: [121.59996, 31.197646],
events: {
init: (o) => {
o.getCity((result) => {
let par = document.getElementsByClassName("search-box-wrapper")[0];
par.firstChild.setAttribute(
"placeholder",
"您可以在这里输入要搜索的地址"
);
//todo 定位到搜索位置
this.searchOption.city = result.city;
});
},
moveend: () => {},
zoomchange: () => {},
click: (e) => {
self.lng = e.lnglat.lng;
self.lat = e.lnglat.lat;
self.center = [self.lng, self.lat];
let o = amapManager.getMap();
if (!self.marker) {
self.marker = new AMap.Marker({
position: e.lnglat,
});
self.marker.setMap(o);
}
self.marker.setPosition(e.lnglat);
let geocoder = new AMap.Geocoder({});
geocoder.getAddress(e.lnglat, function (status, result) {
if (status === "complete" && result.regeocode) {
self.address = result.regeocode.formattedAddress;
} else {
console.log.error("根据经纬度查询地址失败");
}
});
},
},
plugin: [
"ToolBar",
{
pName: "MapType",
defaultType: 0,
events: {
init(o) {
},
},
},
{
pName: "Geolocation",
events: {
init(o) {
// o 是高德地图定位插件实例
o.getCurrentPosition((status, result) => {
// console.log(JSON.stringify(result));
if (result && result.position) {
self.lng = result.position.lng;
self.lat = result.position.lat;
self.address = result.formattedAddress;
self.center = [self.lng, self.lat];
// console.log(self.center, 99666);
let o = amapManager.getMap();
if (!self.marker) {
self.marker = new AMap.Marker({
position: self.center,
});
self.marker.setMap(o);
}
self.marker.setPosition(self.center);
}
});
},
},
},
],
};
},
methods: {
handleClose() {
console.log(this.center,this.address)
this.locationMsg.name=this.address
this.locationMsg.location={
lng:this.center[0],
lat:this.center[1]
}
// console.log(this.locationMsg,'bbbbbbbb')
this.$emit('getLocation',this.locationMsg)
this.$emit('close')
},
onSearchResult(pois) {
if (pois.length > 0) {
let { lng, lat, name, location,address } = pois[0];
//?显示
this.address=address+name
this.center=location
this.locationMsg.name=address+name
this.locationMsg.location=location
let center = [lng, lat];
this.lng = lng;
this.lat = lat;
this.center = [lng, lat];
let o = amapManager.getMap();
if (!this.marker) {
this.marker = new AMap.Marker({
position: center,
});
this.marker.setMap(o);
}
this.marker.setPosition(center);
}
},
},
};
</script>
<style scoped>
::v-deep .el-dialog{
width: 60% !important;
}
.amap-page-container{
margin: 0 100px 100px 100px !important;
}
.search-box {
position: absolute;
top: 25px;
right: 120px;
}
.amap-page-container {
position: relative;
}
</style>