地图选择点位及回显点位 封装组件

<template>
    <div class="map-page">
        <div id="myMap" style="width: 100%; height: 500px"></div>
        <div class="search-wrap">
            <el-input
                v-model="address"
                placeholder="请输入"
                @keyup.enter.native="handleSearch"
            >
                <el-button
                    slot="append"
                    icon="el-icon-search"
                    @click="handleSearch"
                ></el-button>
            </el-input>
        </div>
        <div class="confirm-btn">
            <el-button @click="confirmWindow()" type="primary">
                确定
            </el-button>
        </div>
        <!-- <el-dialog
      width="30%"
      title="位置信息"
      :visible.sync="innerVisible"
      append-to-body
    >
      <div>地址：{{ currentGeo.formattedAddress }}</div>
      <div>经度：{{ currentGeo.location.lng }}</div>
      <div>纬度：{{ currentGeo.location.lat }}</div>
    </el-dialog> -->
    </div>
</template>

<script>
import AMapLoader from '@amap/amap-jsapi-loader'
export default {
    name: 'myMap',
    props: {
        lnglat: {
            type: Object,
            default: () => {
                return {
                    lng: '',
                    lat: ''
                }
            }
        }
    },
    data() {
        return {
            AMap: null,
            map: null,
            marker: null,
            geoCoder: null, // 地理位置
            address: '', // 搜索的地址
            infoWindow: null, // 信息窗体
            markerImg: require('@/assets/img/icon-marker.png'),
            // 当前地址信息
            currentGeo: {
                location: {},
                address: ''
            }
        }
    },
    mounted() {
        //DOM初始化完成进行地图初始化
        this.initMap()
        window.closeWindow = () => {
            this.infoWindow.close()
        }
    },
    methods: {
        initMap() {
            const _this = this
            AMapLoader.load({
                key: '***************', // 申请好的Web端开发者Key，首次调用 load 时必填
                version: '2.0' // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
            })
                .then(AMap => {
                    _this.AMap = AMap
                    let center =
                        _this.lnglat.lng || _this.lnglat.lat
                            ? [_this.lnglat.lng, _this.lnglat.lat]
                            : [108, 34.32]
                    _this.map = new AMap.Map('myMap', {
                        //设置地图容器id
                        viewMode: '3D', //是否为3D地图模式
                        zoom: 8, //初始化地图级别
                        center: center, //初始化地图中心点位置
                        features: ['bg', 'point', 'road', 'building']
                    })
                    // 图层
                    var icon = new AMap.Icon({
                        size: new AMap.Size(22, 22), // 图标尺寸
                        image: _this.markerImg,
                        imageSize: new AMap.Size(22, 22) // 根据所设置的大小拉伸或压缩图片
                    })
                    this.marker = new AMap.Marker({
                        offset: new AMap.Pixel(-10, -25),
                        icon: icon // 添加 Icon 图标 URL
                    })
                    // 点击选点
                    this.map.on('click', function (e) {
                        _this.marker.setPosition(e.lnglat)
                        _this.map.add(_this.marker)
                        // 坐标转地理位置
                        _this.regeoCode(e.lnglat)
                    })
                    // 点击图层显示位置信息
                    this.marker.on('click', function (e) {
                        _this.infoWindow.open()
                    })
                    // 回填地址
                    this.fillData()
                })
                .catch(e => {
                    console.log(e)
                })
        },
        // 地址转经纬度的方法
        geoCode() {
            const _this = this
            this.map.plugin('AMap.Geocoder', function () {
                var geocoder = new _this.AMap.Geocoder({
                    // city 指定进行编码查询的城市，支持传入城市名、adcode 和 citycode
                    city: '0'
                })
                // 地址=》经纬度
                geocoder.getLocation(_this.address, (status, result) => {
                    if (status === 'complete' && result.geocodes.length) {
                        var geoObj = result.geocodes[0]
                        var lnglat = geoObj.location
                        // 位置信息赋值
                        _this.currentGeo = {
                            location: geoObj.location,
                            address: geoObj.formattedAddress
                        }
                        // 信息窗体
                        _this.toggleInfoWindow()
                        _this.marker.setPosition(lnglat)
                        _this.map.add(_this.marker)
                        _this.map.setFitView(_this.marker)
                    } else {
                        _this.$notify({
                            title: '提示',
                            message: '没找到要查询的地址，请重新输入',
                            type: 'warning'
                        })
                    }
                })
            })
        },
        // 坐标转地理位置
        regeoCode(lnglat) {
            const _this = this
            this.map.plugin('AMap.Geocoder', function () {
                var geocoder = new _this.AMap.Geocoder({
                    // city 指定进行编码查询的城市，支持传入城市名、adcode 和 citycode
                    city: '0'
                })
                geocoder.getAddress(lnglat, function (status, result) {
                    if (status === 'complete' && result.regeocode) {
                        var regeocode = result.regeocode
                        _this.currentGeo = {
                            location: lnglat,
                            address: regeocode.formattedAddress
                        }
                        // console.log('坐标转地理位置：', regeocode)
                        // 信息窗体
                        _this.toggleInfoWindow()
                    } else {
                        console.log('根据经纬度查询地址失败')
                    }
                })
            })
        },
        // 信息窗体
        toggleInfoWindow() {
            const _this = this
            this.infoWindow = new _this.AMap.InfoWindow({
                offset: new _this.AMap.Pixel(0, -30),
                closeWhenClickMap: true //控制是否在鼠标点击地图后关闭信息窗体
            })

            this.infoWindow.setContent(
                `<div class="address-wrap">
          <div>地址：<span>${_this.currentGeo.address}</span></div>
          <div>经度：<span>${_this.currentGeo.location.lng}</span></div>
          <div>纬度：<span>${_this.currentGeo.location.lat}</span></div>
        </div>
        `
            )
            this.infoWindow.open(_this.map, [
                _this.currentGeo.location.lng,
                _this.currentGeo.location.lat
            ])
        },
        // 搜索
        handleSearch(val) {
            if (val !== '') this.geoCode()
        },
        // 回填
        fillData() {
            if (!this.lnglat.lng || !this.lnglat.lat) return
            var lnglat = new this.AMap.LngLat(this.lnglat.lng, this.lnglat.lat)
            this.regeoCode(lnglat)
            this.marker.setPosition(lnglat)
            this.map.add(this.marker)
        },
        // 地图坐标点选择确认事件
        confirmWindow() {
            this.$emit('confirmMapInfo', this.currentGeo.location)
        }
    }
}
</script>
<style lang="scss" scoped>
// @import url(); 引入公共css类
.map-page {
    position: relative;
    padding: 10px 15px;
    ::v-deep .amap-logo,
    ::v-deep .amap-copyright {
        display: none !important;
    }
    .search-wrap {
        position: absolute;
        left: 30px;
        top: 30px;
    }
    .confirm-btn {
        width: 100%;
        box-shadow: 0px -1px 0px 0px rgba(218, 220, 224, 1);
        text-align: right;
        margin-top: 11px;
        padding-top: 10px;
    }
    ::v-deep.address-wrap {
        padding: 10px;
        font-family: PingFangSC-Medium;
        font-size: 13px;
        color: #5c606a;
        letter-spacing: 0;
        line-height: 26px;
        font-weight: 500;
        span {
            color: #212d3b;
            font-weight: 600;
        }
        .btn-group {
            text-align: center;
            .cancel {
                line-height: 32px;
                cursor: pointer;
            }
            .confirm {
                margin-left: 10px;
                line-height: 32px;
                color: #409eff;
                cursor: pointer;
            }
        }
    }
}
</style>

下载插件：@amap/amap-jsapi-loader 和 amap

项目中使用：

<LonLatInMap

@confirmMapInfo="confirmMapInfo"

:lnglat="{

lng: form.longitude,

lat: form.latitude

}">

</LonLatInMap>