vue集成高德地图API实现坐标拾取功能

安装与配置：

组件 | vue-amapDescriptionhttps://elemefe.github.io/vue-amap/#/zh-cn/introduction/install简介 | @vuemap/vue-amap简介https://vue-amap.guyixi.cn/zh-cn/introduction/introduction.html        ​​​​我的应用 | 高德控制台高德开放平台官网控制台提供了高德开发者Key管理，Key可视化分析等功能。https://console.amap.com/dev/key/app        

页面设计与引用

<template>
    <div class="amap-wrapper">

        <el-amap class="amap-box"  :vid="'amap-vue'"  :bubble="true" :center="center" :zoom="zoom" :events="events">
            <!-- 搜索框 -->
            <el-amap-search-box
                class="searchBox"
                :search-option="searchOption"
                :on-search-result="onSearchResult"
            />
            <!-- 标注点 -->
            <el-amap-marker :position="center" ></el-amap-marker>
            <!-- tootip -->
            <el-amap-text
                :position="mark"
                :text="mark.toString()"
                :offset="[100,-20]"
            >
            </el-amap-text>
            <!-- 信息窗体-->
            <el-amap-info-window
                :position="center"
                :offset="[0,-30]"
            >
                <div style="margin: 15px 5px 0">{{ centerAddress.formattedAddress }}</div>
            </el-amap-info-window>
        </el-amap>
    </div>
</template>
<script>
    export default {
        name: 'siteinfo',
        data() {
            return {
                zoom: 10,//初始缩放比例
                center: [104.077448,30.624161],//初始中心点
                mark: [104.077448,30.624161],//初始标记点
                centerAddress: {//中心点位置信息
                    city: "全国",
                    district: "全国",
                    province: "全国",
                    township: "",
                    formattedAddress: "全国",
                },
                markAddress: {//标记点位置信息
                    city: "全国",
                    district: "全国",
                    province: "全国",
                    township: "",
                    formattedAddress: "全国",
                },
                searchOption:{
                    city:"全国",
                    citylimit:true,
                },
                events: {
                    // init: (e) => {
                    //     // this.center=[101.722732,26.580607]
                    //     this.getAddress(this.center);
                    // },
                    click: (e) => {
                        this.center = [e.lnglat.lng, e.lnglat.lat]
                        this.getAddress(this.center);

                    },
                    mousemove: (e) => {
                        this.mark = [e.lnglat.lng, e.lnglat.lat]
                    }

                }
            }
        },
        methods: {
            
            // 使用AMap服务获取地址
            getAddress(latLong){
                var geocoder;
                AMap.plugin("AMap.Geocoder",function(){

                    geocoder = new AMap.Geocoder({
                        radius: 1000,
                        extensions: 'all'
                    });

                })
                geocoder.getAddress(latLong, (status, result) => {

                    console.log("address", result)
                    if (status === 'complete' && result.info === 'OK') {
                        // 获取当前点名称
                        const address = result.regeocode.formattedAddress;
                        this.centerAddress = {
                            city: result.regeocode.addressComponent.city,
                            district: result.regeocode.addressComponent.district,
                            province: result.regeocode.addressComponent.province,
                            township: result.regeocode.addressComponent.township,
                            formattedAddress: address,
                        }
                        // console.log("address", result)
                    }
                });
            },

            // 地图搜索回调
            onSearchResult(pois) {
               

                if( pois.length !== 0){
                    this.center=[pois[0].lng, pois[0].lat];
                    this.getAddress(this.center);
                }
                console.log("地图回调", pois);

            },
            //修改时将当前坐标赋值
            rowEdit(row, index){
                console.log("row",row)
                this.center=row.latLong.split(',').map(Number)
                this.getAddress(this.center);

                this.$refs.crud.rowEdit(row,index)

            },

            //新增时给个初始位置
            rowAdd(){
                this.center=[104.077448,30.624161];
                this.getAddress(this.center);
            },

            // 更新
            handleUpdate: function (row, index, done,loading) {

                row.province = this.centerAddress.province
                row.city = this.centerAddress.city
                row.disrict = this.centerAddress.district
                row.addressDetail = this.centerAddress.formattedAddress
                row.latLong = this.center.toString()
                console.log(row)

                if( row.latLong ){
                    putObj(row).then(data => {
                        this.$message.success('修改成功')
                        done()
                        this.searchForm = {}
                        this.getList(this.page)
                    }).catch(() => {
                        loading();
                    });
                }else {
                    this.$message.error('请选择筛查地点')
                }

            },
            // 保存
            handleSave: function (row, done,loading) {
                row.province = this.centerAddress.province
                row.city = this.centerAddress.city
                row.disrict = this.centerAddress.district
                row.addressDetail = this.centerAddress.formattedAddress
                row.latLong = this.center.toString()

                console.log(row)


                addObj(row).then(data => {
                    this.$message.success('添加成功')
                    done()
                    this.searchForm = {}

                    this.getList(this.page)
                }).catch(() => {
                    loading();
                });
            },
           
        }
    }
</script>

<style scoped>
.amap-wrapper {
    width: 100%;
    height: 75Vh;
    position: relative;
    .searchBox{
        position: absolute;
        top: 20px;
        left: 20px;
    }
}
</style>