247 lines
7.1 KiB
Vue
247 lines
7.1 KiB
Vue
<template>
|
||
<div>
|
||
<div style="margin: 0px 0px" ref="pform">
|
||
<div style="display: flex">
|
||
<p style="margin-right: 34px">省市区</p>
|
||
<el-cascader
|
||
v-model="input"
|
||
:options="options"
|
||
clearable
|
||
style="margin-top: 8px"
|
||
@change="changeOption"></el-cascader>
|
||
</div>
|
||
<div style="display: flex">
|
||
<p style="margin-right: 20px">选择区域</p>
|
||
<div id="container" class="container" clearable style="margin-top: 15px"></div>
|
||
</div>
|
||
</div>
|
||
<p>详细地址：<el-input v-model="form.address"
|
||
placeholder="请输入内容"
|
||
style="width: 50%"
|
||
@change="getLngLat"
|
||
></el-input></p>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import AMapLoader from "@amap/amap-jsapi-loader";
|
||
import {getClient} from "@/api/staff/client";
|
||
|
||
export default {
|
||
props:['pform'],
|
||
data(){
|
||
return {
|
||
// 地图实例
|
||
map: null,
|
||
polygons: [],
|
||
// 标记点
|
||
marker: "",
|
||
// 地址逆解析
|
||
geoCoder: null,
|
||
// 搜索提示
|
||
AutoComplete: null,
|
||
// 搜索关键字
|
||
keywords: "",
|
||
// 位置信息
|
||
form: {
|
||
lng: "",
|
||
lat: "",
|
||
address: "",
|
||
adcode: "", //地区编码
|
||
},
|
||
// 搜索节流阀
|
||
loading: false,
|
||
// 搜索提示信息
|
||
options: [],
|
||
option:{
|
||
value:'',
|
||
label:'',
|
||
children:[],
|
||
},
|
||
district:'',
|
||
input:'',
|
||
}
|
||
},
|
||
created() {
|
||
this.form = this.pform;
|
||
this.getOption();
|
||
},
|
||
mounted() {
|
||
},
|
||
methods:{
|
||
pasVal(){
|
||
this.$emit('pform', this.form); // 触发custom-event事件并传递参数
|
||
// this.$refs.pform.pasVal()
|
||
},
|
||
changeOption(val){
|
||
this.remoteMethod(val[2]);
|
||
},
|
||
getOption(){
|
||
let _this = this;
|
||
getClient().then(response => {
|
||
_this.options = response.data.list;
|
||
})
|
||
},
|
||
initAMap() {
|
||
console.log("86",this.pform)
|
||
let _this = this;
|
||
AMapLoader.load({
|
||
key: "b5abec514cab7c71cb0572765131e6fc", // 申请好的Web端开发者Key，首次调用 load 时必填
|
||
version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
|
||
plugins: ["AMap.Geocoder", "AMap.AutoComplete","AMap.DistrictSearch","AMap.PlaceSearch","AMap.Autocomplete"], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
|
||
}).then((AMap) => {
|
||
this.map = new AMap.Map("container", {
|
||
viewMode: "2D", //是否为3D地图模式
|
||
zoom: 17, //初始化地图级别
|
||
center: [_this.form.lng, _this.form.lat], //初始化地图中心点位置
|
||
});
|
||
// console.log(this.map.center)
|
||
//地址逆解析插件
|
||
this.geoCoder = new AMap.Geocoder({
|
||
city: "010", //城市设为北京，默认：“全国”
|
||
radius: 1000, //范围，默认：500
|
||
});
|
||
// 搜索提示插件
|
||
this.AutoComplete = new AMap.AutoComplete({ city: "全国" });
|
||
// 标记点
|
||
this.setMapMarker();
|
||
//点击获取经纬度;
|
||
this.map.on("click", (e) => {
|
||
// 获取经纬度
|
||
this.form.lng = e.lnglat.lng;
|
||
this.form.lat = e.lnglat.lat;
|
||
// 清除点
|
||
this.removeMarker();
|
||
// 标记点
|
||
this.setMapMarker();
|
||
});
|
||
}).catch(() => {});
|
||
|
||
},
|
||
// 标记点
|
||
setMapMarker() {
|
||
// 自动适应显示想显示的范围区域
|
||
this.map.setFitView();
|
||
this.marker = new AMap.Marker({
|
||
map: this.map,
|
||
position: [this.form.lng, this.form.lat],
|
||
});
|
||
// 逆解析地址
|
||
this.toGeoCoder();
|
||
this.map.setFitView();
|
||
this.map.add(this.marker);
|
||
},
|
||
// 清除点
|
||
removeMarker() {
|
||
if (this.marker) {
|
||
this.map.remove(this.marker);
|
||
}
|
||
},
|
||
// 逆解析地址
|
||
toGeoCoder() {
|
||
let lnglat = [this.form.lng, this.form.lat];
|
||
this.geoCoder.getAddress(lnglat, (status, result) => {
|
||
if (status === "complete" && result.regeocode) {
|
||
this.form.address = result.regeocode.formattedAddress;
|
||
this.pasVal()
|
||
}
|
||
});
|
||
},
|
||
// 搜索
|
||
remoteMethod(query) {
|
||
let _this = this;
|
||
if (query !== "") {
|
||
this.loading = true;
|
||
setTimeout(() => {
|
||
this.loading = false;
|
||
// this.AutoComplete.search(query, (status, result) => {
|
||
// console.log(result.tips);
|
||
// });
|
||
var opts = {
|
||
subdistrict: 0, //返回下一级行政区
|
||
extensions: "all", //返回行政区边界坐标组等具体信息
|
||
level: "city" //查询行政级别为 市
|
||
};
|
||
this.district = new AMap.DistrictSearch(opts); //行政区查询插件
|
||
//进入就显示整个国家范围
|
||
this.district.search(query, function(status, result) {
|
||
_this.form.lng = result.districtList[0].center.lng
|
||
_this.form.lat = result.districtList[0].center.lat
|
||
_this.toGeoCoder();
|
||
_this.pasVal();
|
||
_this.initAMap();
|
||
});
|
||
}, 200);
|
||
} else {
|
||
// this.form = this.pform;
|
||
this.initAMap();
|
||
}
|
||
},
|
||
async getLngLat(){
|
||
let _this = this;
|
||
// const geocoder = new AMap.Geocoder()
|
||
// // 地址反向查经纬度,cName: 当前选中城市
|
||
// geocoder.getLocation(this.form.address, (status, result) => {
|
||
// if (status === 'complete' && result.info === 'OK') {
|
||
// // 经纬度
|
||
// _this.form.lng = result.geocodes[0].location.lng
|
||
// _this.form.lat = result.geocodes[0].location.lat
|
||
// _this.toGeoCoder();
|
||
// _this.pasVal();
|
||
// _this.initAMap();
|
||
// } else {
|
||
// this.$modal.msgError("定位失败");
|
||
// }
|
||
// })
|
||
// 地址反向查经纬度,cName: 当前选中城市
|
||
var map = new AMap.Map("container", {
|
||
resizeEnable: true
|
||
});
|
||
// AMap.service(["AMap.PlaceSearch"], function() {
|
||
//构造地点查询类
|
||
var placeSearch = new AMap.Autocomplete({
|
||
input: "tipinput"
|
||
});
|
||
//关键字查询
|
||
placeSearch.search(this.form.address, (status, result) => {
|
||
if (status === 'complete' && result.info === 'OK') {
|
||
// 经纬度
|
||
_this.form.lng = result.tips[0].location.lng
|
||
_this.form.lat = result.tips[0].location.lat
|
||
_this.toGeoCoder();
|
||
_this.pasVal();
|
||
_this.initAMap();
|
||
} else {
|
||
this.$modal.msgError("定位失败");
|
||
}
|
||
})
|
||
// });
|
||
},
|
||
// 选中提示
|
||
currentSelect(val) {
|
||
// 清空时不执行后面代码
|
||
if (!val) {
|
||
return;
|
||
}
|
||
this.form = {
|
||
lng: val.location.lng,
|
||
lat: val.location.lat,
|
||
address: val.district + val.address,
|
||
adcode: val.adcode,
|
||
};
|
||
// 清除点
|
||
this.removeMarker();
|
||
// 标记点
|
||
this.setMapMarker();
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.container {
|
||
width: 500px;
|
||
height: 300px;
|
||
}
|
||
</style>
|