vue+高德地图 逆地理编码和设置marker

实现逆地理编码 用到高德地图AMap.Geocoder插件

1. 定义创建marker方法

 // 创建marker方法
        setMarker() {
            // 创建一个 Marker 实例：
            this.marker = new AMap.Marker({
                position: new AMap.LngLat(this.center[0], this.center[1]),   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
                title: '北京' // marker的提示
            });

            // 将创建的点标记添加到已有的地图实例：
            this.map.add(this.marker);

            // 移除已创建的 marker
            // map.remove(marker);
        },

2. 定义逆地理编码方法

 // 逆地理编码方法
        InverseGeography() {
            var geocoder = new AMap.Geocoder({
                // city 指定进行编码查询的城市，支持传入城市名、adcode 和 citycode
                city: '010'
            })
            let that = this
            geocoder.getAddress(this.center, function (status, result) {
                if (status === 'complete' && result.info === 'OK') {
                    // result为对应的地理位置详细信息
                    that.address = result.regeocode.formattedAddress
                }
            })
        }

3. 地图点击事件 设置marker和触发逆地理编码

 // 地图点击事件
                this.map.on('click', (ev) => {
                    if (this.marker) {
                        this.map.remove(this.marker);
                        this.center = [ev.lnglat.lng, ev.lnglat.lat]
                        // 设置marker
                        this.setMarker()
                        // 逆地理编码
                        this.InverseGeography()
                    }
                })

4. 全文

<template>
    <div>
        <input id="mapInput" v-model="address" type="text" value="请输入关键字：(选定后搜索)" onfocus='this.value=""'
            placeholder="请输入活动地址" />
        <!-- 百度地图  -->
        <div id="bai-du-map">
            <!-- 技术支持和联系方式  -->
        </div>
    </div>
</template>
 
<script>
import AMapLoader from "@amap/amap-jsapi-loader";
// 设置安全密钥
window._AMapSecurityConfig = {
    securityJsCode: '01749f31f7a3a451c2e1ca0e5abcff14',
}
export default {
    data() {
        return {
            map: null,
            mouseTool: null,
            overlays: [],
            auto: null,
            placeSearch: null,
            marker: null,
            center: [113.65553, 34.748764],
            address: null,
        }
    },
    methods: {
        initMap() {
            AMapLoader.load({
                "key": "3748e65db671fcc6eb43d3bb7a63e8b1",
                "version": "2.0",   // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
                "plugins": ['AMap.AutoComplete', 'AMap.PlaceSearch', 'AMap.Geocoder'], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
            }).then((AMap) => {
                // 初始化地图
                this.map = new AMap.Map('bai-du-map', {
                    viewMode: "2D",  //  是否为3D地图模式
                    zoom: 13,   // 初始化地图级别
                    center: this.center, //中心点坐标  郑州
                    resizeEnable: true
                });
                var autoOptions = {
                    // 城市，默认全国 
                    // city: "北京",
                    // 使用联想输入的input的id
                    input: "mapInput"
                }
                this.auto = new AMap.AutoComplete(autoOptions);
                this.placeSearch = new AMap.PlaceSearch({
                    map: this.map,
                    // panel: "panel", // 结果列表将在此容器中进行展示。
                    // city: "010", // 兴趣点城市
                    autoFitView: true, // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围
                    extensions: 'base' //返回基本地址信息
                });
                this.auto.on("select", this.select);//注册监听，当选中某条记录时会触发

                // 初始化marker
                this.setMarker()
                // 初始化逆地理编码
                this.InverseGeography()

                // 地图点击事件
                this.map.on('click', (ev) => {
                    if (this.marker) {
                        this.map.remove(this.marker);
                        this.center = [ev.lnglat.lng, ev.lnglat.lat]
                        // 设置marker
                        this.setMarker()
                        // 逆地理编码
                        this.InverseGeography()
                    }
                })

            }).catch(e => {
                console.log(e);
            });
        },
        select(e) {
            this.placeSearch.setCity(e.poi.adcode);
            this.placeSearch.search(e.poi.name);  //关键字查询查询
        },
        // 创建marker方法
        setMarker() {
            // 创建一个 Marker 实例：
            this.marker = new AMap.Marker({
                position: new AMap.LngLat(this.center[0], this.center[1]),   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
                title: '北京' // marker的提示
            });

            // 将创建的点标记添加到已有的地图实例：
            this.map.add(this.marker);

            // 移除已创建的 marker
            // map.remove(marker);
        },
        // 逆地理编码方法
        InverseGeography() {
            var geocoder = new AMap.Geocoder({
                // city 指定进行编码查询的城市，支持传入城市名、adcode 和 citycode
                city: '010'
            })
            let that = this
            geocoder.getAddress(this.center, function (status, result) {
                if (status === 'complete' && result.info === 'OK') {
                    // result为对应的地理位置详细信息
                    that.address = result.regeocode.formattedAddress
                }
            })
        }

    },
    mounted() {
        this.initMap()
    },
}
</script>
 
<style scoped>
#bai-du-map {
    overflow: hidden;
    width: 500px;
    height: 500px;
    margin: 0;
    font-family: "微软雅黑";
}
</style>
<style>
/* 隐藏高德logo  */
.amap-logo {
    display: none !important;
}

/* 隐藏高德版权  */
.amap-copyright {
    display: none !important;
}
</style>