vue使用amap实现地图选点

需求

在页面中实现地图选点功能（包括输入位置标记点，地图点击标记点，标记点需要有经度、纬度和详细地址）

思路分析

1.先实现输入位置，获取经纬度，实现地图标记点；
2.监听地图点击事件，获取经纬度，实现地图标记点；

准备工作

1.vue-amap文档
2.高德地图JS API、高德地图输入提示、高德地图逆地理编码

代码使用

1.安装amap

npm install vue-amap --save

2.main.js引用

// 引入vue-amap（高德地图）
import VueAMap from 'vue-amap';
Vue.use(VueAMap);

// 初始化vue-amap
VueAMap.initAMapApiLoader({
    // 高德的key
    key: '高德地图申请的key',
    // 插件集合
    plugin: [
        'AMap.Autocomplete',
        'AMap.PlaceSearch',
        'AMap.Scale',
        'AMap.OverView',
        'AMap.ToolBar',
        'AMap.MapType',
        'AMap.PolyEditor',
        'AMap.CircleEditor',
        'AMap.Geolocation'
    ],
    // 高德 sdk 版本，默认为 1.4.4
    v: '1.4.4'
});

3.vue文件代码

<template>
    <div class="amap-page-container">
        <!--使用element UI作为输入框-->
        <el-input v-model="mapInfo.address" placeholder="请输入内容" id="tipinput"></el-input>
        <el-amap
            vid="amapDemo"
            :center="mapInfo.lnglat"
            :amap-manager="amapManager"
            :zoom="zoom"
            :events="events"
            class="amap-demo"
            style="height: 300px"
        >
            <el-amap-marker ref="marker" vid="component-marker" :position="mapInfo.lnglat"></el-amap-marker>
        </el-amap>
        <p>标记点：{{ mapInfo.address }}，经度：{{ mapInfo.lng }}，纬度：{{ mapInfo.lat }}</p>
    </div>
</template>

<style>
.amap-demo {
    height: 300px;
}
</style>

<script>
import { AMapManager } from 'vue-amap';
const amapManager = new AMapManager();
export default {
    data: function () {
        return {
            mapInfo: {
                //初始值默认为天安门
                address: '北京市东城区东华门街道天安门',
                lng: 116.397451,
                lat: 39.909187,
                lnglat: [116.397451, 39.909187]
            },
            zoom: 12,
            amapManager,
            events: {
                click: (e) => {
                    this.mapInfo.lng = e.lnglat.lng;
                    this.mapInfo.lat = e.lnglat.lat;
                    this.mapInfo.lnglat = [e.lnglat.lng, e.lnglat.lat];
                    this.getFormattedAddress();
                }
            }
        };
    },

    methods: {
        getFormattedAddress() {
            AMap.plugin('AMap.Geocoder', () => {
                let GeocoderOptions = {
                    city: '全国'
                };
                let geocoder = new AMap.Geocoder(GeocoderOptions);
                geocoder.getAddress(this.mapInfo.lnglat, (status, result) => {
                    console.log('通过经纬度拿到的地址', result);
                    if (status === 'complete' && result.info === 'OK') {
                        this.mapInfo.address = result.regeocode.formattedAddress;
                    } else {
                        this.mapInfo.address = '无法获取地址';
                    }
                });
            });
        },
        initMapByInput() {
            AMap.plugin('AMap.Autocomplete', () => {
                let autoOptions = {
                    city: '全国',
                    input: 'tipinput'
                };
                let autoComplete = new AMap.Autocomplete(autoOptions);
                AMap.event.addListener(autoComplete, 'select', (e) => {
                    console.log('通过输入拿到的地址', e);
                    this.mapInfo.lat = e.poi.location.lat;
                    this.mapInfo.lng = e.poi.location.lng;
                    this.mapInfo.lnglat = [e.poi.location.lng, e.poi.location.lat];
                    this.getFormattedAddress();
                });
            });
        }
    },
    mounted() {
        this.initMapByInput();
    }
};
</script>
<style>
#tipinput {
    margin-bottom: 10px;
}
</style>

运行结果

image.gif