vuejs 引入高德地图 点击选取位置获取经纬度及位置信息

父组件：

 

 <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>