父组件:
<el-form-item label="经纬度:" prop="longitude">
<template>
<div style="display: flex;align-items: center;">
<el-input :value="dialogForm.longitude" placeholder="经度" maxlength="30" clearable
@focus="getLocation" />
<el-input :value="dialogForm.latitude" placeholder="纬度" maxlength="30" clearable
@focus="getLocation" />
</div>
<quedeMap ref="mapContainer" :longitude="dialogForm.longitude" :latitude="dialogForm.latitude"
@getChildDate="getChildDate" />
</template>
</el-form-item>
methods:
getLocation() {
this.$refs.mapContainer.initMap();
},
// 子组件传值
getChildDate(e) {
console.log("🚀 ~ getChildDate ~ e:", e);
// this.childrenValue = e;
this.dialogForm.longitude = e.longitude;
this.dialogForm.latitude = e.latitude;
},
封装组件:
<template>
<el-dialog :title="!dataForm.id ? '新建' : isDetail ? '详情' : '编辑'" :close-on-click-modal="false" :visible.sync="visible"
class="rv-dialog rv-dialog_center" lock-scroll :modal="false" width="74%">
<el-row :gutter="15" class="">
<el-col :span="8">
<el-form ref="elForm" :model="dataForm" :rules="rules" size="small" label-width="70px"
label-position="right" :disabled="!isDetail">
<el-col :span="24">
<el-form-item label="地点" prop="kqLocation">
<el-input v-model="dataForm.kqLocation" placeholder="自动带出" clearable :style="{ width: '100%' }"
disabled>
</el-input>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="经度" prop="kqLongitude">
<el-input v-model="dataForm.kqLongitude" placeholder="自动带出" clearable :style="{ width: '100%' }"
disabled>
</el-input>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="纬度" prop="kqLatitude">
<el-input v-model="dataForm.kqLatitude" placeholder="自动带出" clearable :style="{ width: '100%' }"
disabled>
</el-input>
</el-form-item>
</el-col>
</el-form>
</el-col>
<el-col :span="16">
<div style="width: 100%">
<div class="search_box">
<div class="label">关键字搜索</div>
<el-input v-model="input" placeholder="请输入内容" id="tipinput"></el-input>
</div>
<div ref="gaodeMap" id="gaodeMap"></div>
</div>
</el-col>
</el-row>
<span slot="footer" class="dialog-footer">
<el-button @click="visible = false">取 消</el-button>
<el-button type="primary" @click="dataFormSubmit()" v-if="!isDetail">确 定</el-button>
</span>
</el-dialog>
</template>
<script>
import AMapLoader from "@amap/amap-jsapi-loader"; //引入AMapLoader
window._AMapSecurityConfig = {
// 设置安全密钥
securityJsCode: "db177af20b348f454724fbb3c4283814",
};
export default {
components: {},
props: {
longitude: {
type: Number,
default: 108.947089,
},
latitude: {
type: Number,
default: 34.259365,
},
},
data() {
return {
loading: false,
visible: false,
isDetail: false,
addressName: "",
dataForm: {
kqLocation: undefined,
kqLongitude: undefined,
kqLatitude: undefined,
kqWorkUnit: undefined,
cronkqAccredit: [],
kqValidCardRange: undefined,
},
rules: {},
input: "",
map: null,
auto: null,
placeSearch: null,
lnglat: [],
markers: [],
position: {},
};
},
computed: {},
watch: {},
created() { },
mounted() { },
methods: {
// 提交
dataFormSubmit() {
console.log("🚀 ~ dataFormSubmit ~ this.position:", this.position);
this.$emit("getChildDate", this.position);
this.visible = false;
},
// 地图初始化
initMap() {
console.log("🚀 ~ initMap ~ ");
this.$nextTick(() => {
this.visible = true;
let centerLen = [];
if (
this.longitude !== null &&
this.latitude !== null &&
this.longitude !== "" &&
this.latitude !== ""
) {
centerLen = [this.longitude, this.latitude];
} else {
centerLen = ["108.947089", "34.259365"];
}
console.log("🚀 ~ this.$nextTick ~ centerLen:", centerLen);
AMapLoader.reset()
AMapLoader.load({
key: "cd5cfbe908d53292546b08959deff486", // 申请好的Web端开发者Key,首次调用 load 时必填
version: "2.0", // 指定要加载的 JSAPI 的版本,缺省时默认为 1.4.15
plugins: ["AMap.AutoComplete", "AMap.PlaceSearch", "AMap.Geocoder"],
})
.then((AMap) => {
if (AMap && document.getElementById("gaodeMap")) {
this.map = new AMap.Map("gaodeMap", {
// 设置地图容器id
viewMode: "3D", // 是否为3D地图模式
zoom: 18, // 初始化地图级别
center: centerLen, //中心点坐标
resizeEnable: true,
});
this.setMarker(centerLen);
// 关键字查询
this.searchMap();
// 监听鼠标点击事件
this.map.on("click", this.clickMapHandler);
}
})
.catch((err) => {
console.log("🚀 ~ initMap ~ err:", err);
});
});
},
// 关键字查询
searchMap() {
// 搜索框自动完成类
this.auto = new AMap.AutoComplete({
input: "tipinput", // 使用联想输入的input的id
});
//构造地点查询类
this.placeSearch = new AMap.PlaceSearch({
map: this.map,
});
// 当选中某条搜索记录时触发
this.auto.on("select", this.selectSite);
},
//选中查询出的记录
selectSite(e) {
console.log("🚀 ~ selectSite ~ e:", e);
// if (e.poi.location) {
// this.lnglat = [e.poi.location.lng, e.poi.location.lat];
this.placeSearch.setCity(e.poi.adcode);
this.placeSearch.search(e.poi.name); //关键字查询
let geocoder = new AMap.Geocoder({});
let that = this;
geocoder.getAddress(this.lnglat, function (status, result) {
if (status === "complete" && result.regeocode) {
that.province = result.regeocode.addressComponent.province;
that.city = result.regeocode.addressComponent.city;
//自己想要赋的值,根据自己的做修改
that.$set(that.form, "province", that.province);
that.$set(that.form, "city", that.city);
that.$set(that.form, "address", e.poi.name);
that.$set(
that.form,
"coordinate",
e.poi.location.lng + "," + e.poi.location.lat
); //纬度,经度
} else {
}
});
// } else {
// this.$message.error("查询地址失败,请重新输入地址");
// }
},
// 点击地图事件获取经纬度,并添加标记
clickMapHandler(e) {
this.dataForm.kqLongitude = e.lnglat.getLng();
this.dataForm.kqLatitude = e.lnglat.getLat();
this.lnglat = [e.lnglat.getLng(), e.lnglat.getLat()];
this.setMarker(this.lnglat);
// 点击地图上的位置,根据经纬度转换成详细地址
let geocoder = new AMap.Geocoder({});
let that = this;
geocoder.getAddress(this.lnglat, function (status, result) {
if (status === "complete" && result.regeocode) {
console.log("🚀 ~ result:", result);
that.dataForm.kqLocation = result.regeocode.formattedAddress;
}
});
this.position = {
longitude: e.lnglat.getLng(),
latitude: e.lnglat.getLat(),
address: that.dataForm.kqLocation,
};
this.input = that.dataForm.kqLocation; //把查询到的地址赋值到输入框
},
// 添加标记
setMarker(lnglat) {
this.removeMarker();
let marker = new AMap.Marker({
position: lnglat,
});
marker.setMap(this.map);
this.markers.push(marker);
},
// 删除之前后的标记点
removeMarker() {
if (this.markers) {
this.map.remove(this.markers);
}
},
},
};
</script>
<style lang="scss">
.search_box {
display: flex;
justify-content: flex-start;
align-items: center;
height: 50px;
.label {
color: #000;
width: 100px;
}
}
.content {
position: relative;
}
#panel {
position: absolute;
top: 50px;
right: 20px;
}
#gaodeMap {
overflow: hidden;
width: 100%;
height: 540px;
margin: 0;
}
.amap-sug-result {
z-index: 2999 !important;
}
</style>